Next.js 13 App目录获取Search Params构建报错问题排查

核心问题：Beta版本的类型定义Bug #

Next.js 13.0.0作为App Router的首个Beta版本，在服务端组件的searchParams类型处理上存在明显漏洞：

• 官方类型定义错误地将searchParams标记为可选（可能为undefined），但实际在服务端渲染流程中，无论是否有查询参数，searchParams都会是一个空对象或包含参数的对象，绝不会是undefined
• dev模式下的类型检查规则相对宽松，会忽略这个矛盾；但build阶段的类型校验是严格模式，直接触发类型不匹配错误

为什么Next Router没用？ #

App Router的服务端组件不支持next/router（这是Pages Router的专属API），服务端组件只能通过组件props获取searchParams，所以你尝试的Router方案完全不适用。

临时修复&彻底解决办法 #

• 快速临时修复：用类型断言强制指定searchParams的类型，跳过错误校验：

export default function ExplorePage({ searchParams }: { searchParams?: { [key: string]: string | string[] | undefined } }) {
  const safeParams = searchParams as NonNullable<typeof searchParams>;
  // 后续用safeParams处理业务逻辑
}

• 彻底解决：直接升级Next.js到13.1.0及以上版本，官方在13.1系列中已经修复了这个类型定义问题，执行npm install next@13.1.0（或更高稳定版）即可解决，同时还能获得其他Beta版本的Bug修复。

内容的提问来源于stack exchange，提问作者Carl Hugo