如何将 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”类型的参数不可分配给“字符串”类型的参数。

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

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

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

原文由 Citizen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

原文由 Nikolai Kiselev 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

一种解决方案是以这种方式进行转换：

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

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

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

原文由 Lukas Bobinas 发布，翻译遵循 CC BY-SA 4.0 许可协议