Next.js个人博客动态路由执行npm run build预渲染报错如何解决？

核心问题定位 #

报错指向/posts/[post]路由页面，不是你贴出的分类动态路由页面，触发原因是页面渲染时读取Headline属性的上层对象为undefined。

具体修复方案 #

1. 修复/posts/[post]单页路由逻辑 #

• 在getStaticProps中增加返回数据有效性校验，数据为空时直接返回404，避免无效数据传入组件：

export const getStaticProps = async (context) => {
  const { post } = context.params;
  const res = await fetch(`你的单篇博文请求API，传入参数${post}`);
  const postData = await res.json();
  // 新增有效性判断
  if (!postData || !postData.Headline) {
    return {
      notFound: true
    }
  }
  return {
    props: {
      postData
    }
  }
}

• 如果你用博文标题作为路由参数，生成路径时需要对标题做URI编码，避免特殊字符、空格导致API匹配失败：

// getStaticPaths中生成路径时编码
const paths = Headlines.map(Headline => ({ 
  params: { 
    post: encodeURIComponent(Headline.toString()) 
  } 
}))
// getStaticProps中读取参数时解码
const post = decodeURIComponent(context.params.post)

2. 修复你贴出的分类动态路由页面潜在问题 #

• 修正getStaticProps中的API请求逻辑，传入当前分类参数，避免请求返回空数据：

const getTheCateogariesRes = await fetch(`你的分类博文API?category=${cateogary}`)

• 因为你设置了fallback: true，未预生成的分类页首次访问时组件会先拿到空props，需要增加加载态判断，避免直接遍历数组报错：

export default function cateogaryPageFun({ getTheCateogaries }) {
  // 新增加载判断
  if (!getTheCateogaries) return <div>加载中...</div>
  // 原有逻辑
}

• 统一修正拼写错误：代码中所有cateogary应为正确拼写category，避免参数匹配异常。

3. 构建排查技巧 #

• 构建前先本地执行npm run dev访问对应路由，查看控制台报错信息，定位效率远高于直接构建。
• 在getStaticPaths、getStaticProps中打印请求返回结果，构建时查看日志即可快速判断是API返回异常还是参数传递错误。

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