你可以告诉编译器如何处理变量：

const photoId = parseInt(router.query.photoId as string, 10)

注意，router.query的属性可以是undefined。

一种解决方案是以这种方式进行铸造：

const photoId = router.query.photoId ? +router.query.photoId : undefined;

查询属性可能未定义，所以首先检查它是否定义，然后使用一元运算符，或者只返回undefined。integer的类型将是number | undefined。当然，要记住photoId是否是可以转换为数字的值。
我总是尽量避免使用as，因为typescript已经不可靠了，所以这不会给类型系统本身增加额外的“可信度”。

我还建议使用typescript predicate 而不是直接强制as string。这可以更普遍地用于保证router.query产生类型安全的结果。这有点冗长，但下面的策略有助于比强制转换更好地确保类型安全：

type ExpectedQuery = {
  photoId: string;
}

function isValidQuery(query: ParsedUrlQuery): query is ExpectedQuery {
  // check the query properties
  return typeof (query.photoId) === 'string'
}

const MyComponent: React.FC = () => {
  const router = useRouter();

  if (!isValidQuery(router.query)) {
    // the query isn't what you expected
    // handle it somehow
    return null;
  }

  // Cast to number/undefined
  let photoId = +router.query.photoId

  // Check that it cast correctly
  if (!photoId || isNaN(photoId)) {
    // handle undefined or NaN case
    return null
  }

  // Do stuff with photoId (it's a number so you can do number-like-things)
  photoId += 10;

  return <div>{photoId}</div>
}

正如您提到的，router.query()是ParsedUrlQuery对象，我们可以扩展接口，从而添加我们期望接收的路径/查询参数。

interface ParsedUrlQueryForPage extends ParsedUrlQuery {
    photoId: number
}

然后，可以通过这种方式Assertrouter.query的类型

const { photoId } = router.query as ParsedUrlQueryForPage

使用接口扩展的替代方法是交叉点类型

const { photoId } = router.query as ParsedUrlQuery & { photoId : number }

您可以参考本文了解更多详细信息https://reacthustle.com/blog/parse-nextjs-query-params-typescript
您可以在TypeScript文档中阅读有关交集类型以及与接口扩展的区别的更多信息。https://www.typescriptlang.org/docs/handbook/2/objects.html#intersection-types