typescript 为什么Next.js的req.query对象的值是字符串类型|字符串[]?

ppcbkaq5  于 2022-12-27  发布在  TypeScript
关注(0)|答案(4)|浏览(146)

Next.js的API路由器接收一个req对象-它是http.IncomingMessage的一个扩展,带有additional middlewares,例如req.queryreq.query的类型,在他们的utils.ts中找到,是:

query: {
    [key: string]: string | string[]
}

为什么可以从查询中接收字符串数组?
我尝试对查询值执行字符串方法,但遇到TS错误-_-

someString.split() // => Property 'split' does not exist on type 'string | string[]'.
nzkunb0c

nzkunb0c1#

查询对象是字符串类型|string[],因为捕获所有路由https://nextjs.org/docs/routing/dynamic-routes
如果你有一个名为[id].js的文件并且使用url页面/123,router.query将返回一个字符串123,但是如果文件名为[... id].js并且使用url页面/123,它将是一个捕获所有路由并且将返回一个数组[“123”],如果url是页面/123/456,它将返回[“123”,“456”]

vhipe2zx

vhipe2zx2#

我想我们可以使用这个,如果我们不使用一个以上的同名参数:

const id = req.query.id as string
2fjabf4q

2fjabf4q3#

您可以转换'string| string[]'到'string',方法是将它们连接起来,如下所示:

let { param } = req.query.param;
if (Array.isArray(param)) {
  param = param.join('');
}
nhhxz33t

nhhxz33t4#

就像Bruno提到的,如果我们知道我们的页面是[id].tsx,我认为使用类型Assert是安全的。

const id = req.query.id as string

我不是很确定在这种情况下是否需要显式的类型收缩,因为nextjs确保了到这个页面的路由包含id作为字符串。这个类型Assert真的有可能出错吗?

相关问题