Next.js动态路由[product].js调用getStaticProps/Paths报客户端异常404

核心错误点 #

• getStaticPaths 返回结构不符合Next.js语法要求
  当前代码直接返回map生成的路由参数数组，但Next.js强制要求getStaticPaths必须返回包含paths、fallback两个属性的对象，缺少外层结构会导致框架无法识别预生成的路由列表，访问对应产品路径时直接触发404。
  修正后的返回逻辑：

  export const getStaticPaths = async () => {
    const products = await sanity.fetch(`
    *[_type == "product" && !(_id in path("drafts.**"))]{
      slug{
        current
      }
    }
    `);
  
    return {
      paths: products.map(({ slug }) => ({
        params: { product: slug.current }
      })),
      fallback: false // 可根据业务需求替换为true或'blocking'
    };
  };
  

  其他两个动态路由能正常运行，是因为代码里保留了正确的返回结构，复制代码替换字段时误删了外层包裹对象就会触发该问题。

• Groq查询未提取单条文档，导致组件取值报错
  当前getStaticProps中的Groq语句*[slug.current == $product]返回的是所有匹配条件的文档构成的数组，而非单个产品对象。直接把数组作为product属性传入组件，后续执行<DetailsPane {...product} />、读取product.images时，本质是在数组对象上取自定义属性，拿到的值全为undefined，会直接触发客户端渲染异常。
  正常运行的另外两个路由，查询语句末尾都加了[0]来获取第一条匹配的单条文档，替换字段时遗漏这部分逻辑就会报错。修正后的查询语句：

  const product = await sanity.fetch(
    `
  *[slug.current == $product][0]{
    name, description, category, images, in_stock, options, price, available_in
  }
  `,
    { product: params.product }
  );
  

补充校验项 #

• 检查pages目录同级路径下是否存在命名为product的静态路由文件/文件夹，Next.js静态路由匹配优先级高于动态路由，会导致动态路由被覆盖触发404
• 校验Sanity中所有product类型文档的slug字段均已正确配置，不存在slug为null的文档，避免生成路径时读取slug.current触发空指针错误

内容的提问来源于stack exchange，提问作者Mac Hooper