Nextjs执行npm run build时报错：Cannot read properties of undefined (reading 'operation')

核心原因 #

1. 静态生成阶段数据未就绪 #

Next.js执行npm run build时会进行静态页面预渲染（SSG），此阶段的执行逻辑和客户端运行不同：如果getHistory异步函数在静态生成时还未完成数据请求，或者请求返回的completeData未正确初始化，就会导致传入Card组件的data为undefined，直接访问data.operation就会触发报错。

2. 组件缺少数据校验逻辑 #

Card组件直接访问props.data.operation，没有前置判断props.data是否存在。无论是静态生成还是客户端渲染，只要data存在未定义的可能性，就会触发该类型错误，而静态生成阶段数据加载的时序问题会放大这个隐患。

3. 异步数据处理时机错误 #

在Customer组件的getHistory函数中，可能存在数据未完全获取就向arrayCards推入Card组件的情况，导致传入的data是未定义状态；或者completeData的部分条目本身就缺失operation字段，也会引发报错。

解决建议 #

• 添加数据校验逻辑
  在Card组件中先判断数据是否存在，再进行后续操作：

// Card组件内部
const operation = props.data?.operation;
if (!operation) {
  return <div>暂无数据</div>; // 或返回加载状态/空组件
}
const translatedState = translateState(operation);

• 确保静态生成时数据完整加载
  如果页面采用静态生成，务必在getStaticProps中完成所有异步数据请求，将完整的completeData传递给页面组件，再逐层传递给Customer和Card组件。避免在组件内部用useEffect执行静态生成需要的数据请求——静态生成阶段不会运行客户端的useEffect。

• 修正异步数据处理逻辑
  在Customer组件中用状态管理控制组件渲染时机，确保数据加载完成后再生成Card组件：

// Customer组件内部
const [historyCards, setHistoryCards] = useState([]);

useEffect(() => {
  const fetchAndRenderCards = async () => {
    const completeData = await getHistory(); // 执行异步数据请求
    // 过滤掉缺失operation字段的无效数据
    const validData = completeData.filter(item => item?.operation);
    const cards = validData.map(item => <Card data={item} key={item.id} />);
    setHistoryCards(cards);
  };
  fetchAndRenderCards();
}, []);

return <div>{historyCards}</div>;

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