Next.js动态路由与查询参数报错问题排查及方案咨询

开发者阿泽

2026-8-4

问题解答

1. 关于动态路由仅匹配带查询参数的路由

Next.js的路由匹配基于路径名（pathname），查询参数（query）不参与路由匹配逻辑，因此不存在特殊的动态路由命名方式能让路由仅匹配带查询参数的请求。

你当前使用的[results].tsx是动态路径参数路由，它会匹配所有单级路径（比如/abc、/favicon.ico都会被匹配），完全不符合仅匹配/results?xxx的需求。正确做法是直接创建静态路由文件results.tsx，它只会匹配/results路径（无论是否带查询参数），这才是你场景下的正确路由方式。

2. 解决`TypeError: Cannot read properties of undefined (reading 'includes')`报错

报错核心原因是[results].tsx的动态路由范围太广，导致/favicon.ico请求被错误匹配到该页面，此时请求的query中没有tags字段，代码直接调用query.tags.includes()就会抛出未定义错误。

具体修复步骤：

修正路由文件
将pages/[results].tsx重命名为pages/results.tsx，这样只有访问/results（带或不带查询参数）才会进入该页面，/favicon.ico的请求会由Next.js默认处理，不会进入你的页面逻辑。

添加空值防护（可选但推荐）
即使修正了路由，也应该在组件代码中对可能不存在的query参数做空值检查，避免其他异常场景报错：

const ResultsPage = ({ query }) => {
  // 默认赋值为空数组，避免undefined调用includes
  const queryTags = query.tags || [];
  // 或者使用可选链操作符简化判断
  const hasTargetTag = query.tags?.includes('target');

  // 后续业务逻辑...
};