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

【问题标题】：How to use query params in Next.js?如何在 Next.js 中使用查询参数？
【发布时间】：2022-05-11 23:02:42
【问题描述】：

在我的 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 会更顺利地处理它。所以我觉得我误会了什么。

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

【问题讨论】：

我总是危险地假设它是一个字符串或通过将其转换为字符串来未定义...然后在我使用它之前进行错误检查...+1 用于提出我应该问几个月的问题以前。
你没有误会，这正是应该做的。相关问题：stackoverflow.com/questions/60110364/….
@juliomalves 谢谢。我想知道转换为stackoverflow.com/a/70530902/470749 之类的字符串是否比我的方法更好。感觉更干净（如果有效）。
它不像你那样添加类型检查那么安全，如果查询参数是一个数组，会导致运行时错误。投射时，您只是让 TypeScript 开心，而不是阻止错误的发生。

标签： node.js next.js query-string

【解决方案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);
}

【讨论】：