Next.js部署Vercel后渲染HTML内容报undefined错误排查

你遇到的报错核心是两个问题叠加导致的：

• 第一，你没有实现Next.js页面对应的数据预取逻辑，生产环境下页面组件根本拿不到你预期的post prop。本地开发能正常运行，一般是本地调试时存在临时mock、热更新缓存或者客户端侧临时传值的情况，这些逻辑不会在Vercel的生产构建/运行环境生效。当post本身是undefined时，直接访问.description_front就会抛出你看到的类型错误。
• 第二，代码没有做空值兜底，不管是服务端传参缺失，还是客户端异步加载数据的首屏空窗期，只要post还没赋值，直接访问属性就会报错。
• 额外还有个语法问题：组件末尾的Fragment标签写反了，<>是开标签，对应闭标签应该是</>，这个问题虽然不是本次报错的直接诱因，但生产构建时可能触发编译异常。

1. 按照你选用的Next.js渲染模式（SSG/SSR/CSR）补全数据获取逻辑，不要让post prop无来源。如果是用静态生成/服务端渲染的模式，必须导出对应的数据获取方法把post注入到页面props里；如果是客户端渲染，就把数据请求逻辑放到组件的useEffect里，维护独立的post状态。
2. 增加空值兜底和加载状态判断，避免访问未初始化的对象属性。
3. 修正Fragment标签的语法错误。

以SSG模式（Vercel部署适配最好的模式）为例，修复后的完整代码如下：

import Axios from "axios";
import { useRouter } from "next/router";

const Post = ({ post }) => {
  const router = useRouter();
  
  // 路由fallback阶段展示加载态
  if (router.isFallback) {
    return <div>内容加载中</div>
  }

  // 可选链兜底，post不存在时htmlString为空，避免报错
  const htmlString = post?.description_front ?? "";

  return <div className="product-des" dangerouslySetInnerHTML={{ __html: htmlString }} />;
};

// 动态路由场景配置预生成路径
export async function getStaticPaths() {
  const { data: postList } = await Axios.get("你的文章列表接口地址");
  const paths = postList.map(item => ({
    params: { id: item.id }
  }));
  return {
    paths,
    fallback: true
  };
}

// 构建时/请求时拉取文章详情数据注入props
export async function getStaticProps({ params }) {
  try {
    const { data: post } = await Axios.get(`你的文章详情接口地址/${params.id}`);
    return {
      props: { post },
      revalidate: 60 // 配置增量静态再生成，单位秒
    };
  } catch (err) {
    return {
      notFound: true // 接口异常时返回404页面
    }
  }
}

export default Post;

补充说明：Vercel针对Next.js做了原生适配，生产环境会严格按照Next.js的生命周期执行页面渲染，本地开发环境的热更新缓存、临时mock值不会同步到生产环境，这也是本地运行正常、部署后报错的常见诱因。

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