如何在 Next.js 中使用查询参数？

Question

在我的 Next.js API 函数中，例如：

export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
  const { someQueryParam } = req.query;
  doSomething(someQueryParam);
  ...

我看到 TypeScript 错误：

'string | 类型的参数 string[]' 不可分配给“string”类型的参数。类型“string[]”不可分配给类型“string”.ts(2345)

所以我开始使用我编写的这个辅助函数：

export function getSimpleStringFromParam(paramValue: string | string[] | undefined) {
  if (paramValue) {
    return typeof paramValue === 'string' ? paramValue : paramValue[0];
  } else {
    return '';
  }
}

它工作得很好，但感觉丑陋和奇怪，感觉就像我想做的事情是一个常见的需求，Next.js 或 Node 会更顺利地处理它。所以我觉得我误解了一些东西。

是否有更官方/更好的方法从查询参数中提取简单的字符串值？

Answer 1

我查看你的辅助函数，发现它someQueryParam是字符串

export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
  const someQueryParam: string = req.query.someQueryParam
    ? req.query.someQueryParam as string
    : "";
  doSomething(someQueryParam);
}

但如果你需要string | string[]使用它：

export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
  const someQueryParam: string | string[] = req.query.someQueryParam
    ? req.query.someQueryParam
    : "";
  doSomething(someQueryParam);
}

或者

 export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
  const { someQueryParam } = req.query.someQueryParam
    ? req.query
    : { someQueryParam: "" };
  doSomething(someQueryParam);
}