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

Question

Next.js的API路由接收一个req对象——它是http的扩展。IncomingMessage带有额外的中间件，如req.query。req.query的类型，发现在他们的utils。ts是:

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

为什么可以从查询中接收字符串数组?

我试图在我的查询值上执行字符串方法，但遇到TS错误-_-

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

Answer 1

查询对象的类型为string | string[]，因为捕获所有路由https://nextjs.org/docs/routing/dynamic-routes

如果你有一个名为[id].js的文件，并且使用了url pages/123, router。查询将返回一个字符串123，但如果文件名为[…id].js并使用url pages/123，它将是一个捕获所有路由，并将返回一个数组["123"]，如果url是pages/123/456，它将返回["123"， "456"]

Answer 2

我认为我们可以使用这个，如果我们不使用多个具有相同名称的参数:

const id = req.query.id as string

Answer 3

您可以将'string | string[]'转换为'string'，方法如下:

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

Answer 4

与上面建议的解决方案类似，但支持多个参数

const { param1, param2 } = req.query as { param1: string; param2: string };

Answer 5

就像Bruno说的那样。如果我们知道我们的页面是[id]。我认为使用类型断言是安全的。

const id = req.query.id as string

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