Next.js使用getStaticProps构建时报params.id未定义错误如何解决

• 核心是TypeScript严格空值检查触发的类型错误：GetStaticProps默认的params类型是ParsedUrlQuery | undefined，TS无法确定params一定存在、且params上一定有id属性，因此在build阶段全量类型检查时报错。
• 本地dev模式正常是因为Next.js的dev默认不会执行全量TypeScript校验，仅build阶段会触发完整的类型编译检查。
• 之前Vercel构建正常、现在突然失败，通常是两种情况导致：1. 近期升级了Next.js/TypeScript版本，新版本对getStaticProps的类型校验规则更严格；2. 项目tsconfig.json中刚开启了strictNullChecks配置，或者锁文件更新后依赖版本发生了未感知的变动。

推荐优先使用类型泛型+兜底判断的方式，兼顾类型安全和异常兼容：

1. 给GetStaticProps传入泛型参数，明确指定params的结构，让TS确定params.id一定存在
2. 额外加一层空值判断兜底，极端场景下返回404

修改后的代码示例：

// 第一个泛型指定返回的props类型，第二个泛型指定params的类型
export const getStaticProps: GetStaticProps<{ data: Product[] }, { id: string }> = async ({ params }) => {
  // 空值兜底判断
  if (!params?.id) {
    return {
      notFound: true
    }
  }
  const res: Response = await fetch(`${baseUrl}/api/products/${params.id}`);
  const data: Product[] = await res.json();

  return {
    props: {
      data,
    },
  };
};

如果只是临时解决编译问题，也可以使用非空断言（不推荐，无类型安全保障）：

const res: Response = await fetch(`${baseUrl}/api/products/${params!.id}`);

内容的提问来源于stack exchange，提问作者niels van hoof