如何将 NextJS router.query 转换为数字？

Question

const router = useRouter()
const { photoId } = router.query

进行比较时，我收到此 Typescript 警告：

TS2367：此条件将始终返回 'false'，因为类型 'number' 和 'string | string[]' 没有重叠。

这是完全有道理的，所以我像这样对我的变量进行类型转换：

const router = useRouter()
const { photoId } = parseInt(router.query, 10)

但现在我收到了这个警告：

TS2345：“ParsedUrlQuery”类型的参数不可分配给“string”类型的参数。

当我查看 NextJS 路由器的源代码时，我看到：

interface ParsedUrlQuery extends NodeJS.Dict<string | string[]> { }

看起来我很接近得到我需要的东西，它只是一个字符串，而不是一个字符串或字符串数​​组。我从这里去哪里？

Answer 1

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

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

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

Answer 2

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

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

查询属性可能未定义，因此您首先检查它是否已定义，使用一元运算符，或者仅返回undefined. 的类型integer将是number | undefined. 当然，请记住是否是photoId可以转换为数字的值。

我总是尽量避免使用as打字稿，因为打字稿已经不健全了，所以这并没有为类型系统本身添加额外的“可信度”。