Next.js项目构建时出现Type Error，开发模式无此问题

问题根源 #

生产构建时TypeScript的检查规则比开发模式更严格，比如strictNullChecks这类规则会强制校验空值，而开发环境可能因热更新或类型推导的宽松处理，没触发这个错误。从截图来看，核心问题是代码中直接使用了可能为undefined的inventory对象（比如访问inventory.products），但类型定义里inventory是可选的（Inventory | undefined）。

可行解决方案 #

1. 空值安全校验 #

在使用inventory前先做非空判断，或者用可选链规避空值：

// 方案A：条件判断
{inventory && inventory.products.map(product => (
  // 渲染产品的逻辑
))}

// 方案B：可选链操作符
{inventory?.products.map(product => (
  // 渲染产品的逻辑
))}

2. 强制保证inventory不为空 #

如果业务上inventory必须存在，直接在Props类型里把它设为必填项，去掉可选符：

interface YourComponentProps {
  inventory: Inventory; // 移除?符号
}

或者给inventory设置默认空对象，兜底避免undefined：

const { inventory = { products: [] } } = props;

3. 对齐开发与构建的TS规则 #

打开tsconfig.json，确保strict字段设为true，让开发环境也启用和构建一致的严格检查，提前发现问题：

{
  "compilerOptions": {
    "strict": true,
    // 其他配置...
  }
}

如果确实需要临时忽略某行的类型错误，可添加注释（不推荐长期使用）：

// @ts-ignore 临时跳过空值校验
{inventory.products.map(product => (
  // 渲染产品的逻辑
))}

4. 检查数据获取逻辑 #

如果inventory是通过getStaticProps/getServerSideProps或API请求获取的，确保构建阶段能拿到完整数据，比如在数据获取函数里判断，若没拿到数据就返回默认的空Inventory对象，避免传递undefined给组件。

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