Next.js构建报blog_slug undefined错误 动态路由404不生效

• 开发环境访问页面、对应URL无报错，执行npm run build构建项目时抛出错误：Generating static pages (0/8)TypeError: Cannot read properties of undefined (reading 'blog_slug')
• 预期效果是动态路由匹配不到有效URL时展示404页面，当前访问无效URL直接触发上述报错，已添加接口响应非200时返回notFound: true的逻辑，但逻辑未生效。

• 核心逻辑错误：状态码判断写法错误，代码中if (res != 200)判断的是fetch返回的Response整体对象，不是响应状态码，该条件永远不成立，notFound: true的逻辑永远不会触发。
• 执行顺序错误：在判断接口响应状态前，就提前执行const Blog = await res.json()解析响应，当接口返回404等异常状态时，解析出的Blog值为undefined，后续渲染读取data.blog_slug直接触发类型错误。
• 配置匹配问题：getStaticPaths设置fallback: true时，构建阶段仅预生成paths列表内的页面，其余路径访问时会实时走getStaticProps逻辑，但由于前面的判断失效，无效路径拿到异常数据后直接传入页面组件触发报错。
• 低级拼写错误：getStaticProps中blog-list接口地址写为https:/mydomain/blog-list/，协议部分少了一个斜杠，会导致该接口请求失败。
• 组件无兜底：页面组件直接读取data.blog_slug，没有对data为空、页面处于fallback加载状态的场景做兼容。

1. 调整getStaticProps逻辑顺序，修正状态码判断写法，修复接口地址拼写错误：

export async function getStaticProps(context) {
  const id = context.params.id;
  const res = await fetch(`https://mydomain/blog-api/${id}`);
  
  // 先判断响应状态码，异常状态直接返回404
  if (res.status !== 200) {
    return {
      notFound: true,
      revalidate: 60 // 可选，配置ISR增量更新周期
    };
  }

  // 状态正常再解析响应体
  const Blog = await res.json();
  // 修正接口地址斜杠错误
  const search_url = "https://mydomain/blog-list/";
  const search_result = await fetch(search_url);
  const search_data = await search_result.json();

  return {
    props: {
      data: Blog,
      search_data: search_data,
    },
    revalidate: 60
  };
}

2. 给页面组件增加兜底逻辑，兼容fallback加载状态、data为空的场景：

function blog_details({ data, search_data }) {
  // fallback: true 模式下首次访问未生成的页面会先进入加载状态
  if (!data) {
    return <div>页面加载中...</div>
  }
  return <h1>{data.blog_slug}</h1>
}

3. 可选优化：如果不需要支持构建完成后新增的博客路径访问，直接把getStaticPaths返回配置中的fallback改为false，所有不在预生成paths列表里的路径会直接返回404，不需要走实时的getStaticProps判断，稳定性更高。

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