React应用打包时报TypeError: Cannot read property '0' of undefined，本地运行正常

问题根因 #

报错的触发点是初始化activeTab状态时直接访问children[0].props.label，当children为undefined、null或者单节点非数组结构时，访问索引0就会抛出该错误。
本地开发未复现、仅打包后出现的核心原因是生产构建的优化逻辑：

• 生产环境会执行Tree Shaking、代码压缩等操作，单节点的children不会被自动包装为数组，空的children也会被严格识别，直接访问索引就会失败
• 开发环境的热更新、冗余调试代码保留等机制暂时掩盖了这个问题，直到生产环境严格执行逻辑才触发报错

修复步骤 #

1. 对children做统一格式转换和兜底 #

在组件内先对传入的children做统一处理，兼容空值、单节点、多节点所有场景：

const Tabs = ({ children}) => {
  // 新增：统一处理children为数组，避免结构不一致问题
  const childList = Array.isArray(children) ? children : children ? [children] : []
  // 修改：初始化state时先判断数组长度，做兜底
  const [activeTab, setActiveTab] = useState(() => {
    return childList.length > 0 ? childList[0].props.label : ''
  })

2. 替换所有遍历对象 #

把后续渲染逻辑里的所有children.map替换为childList.map，避免遍历非数组结构时报错：

<ul className={styles.tabs}>
  {/* 替换children.map为childList.map */}
  {childList.map((tab) => {
    const label = tab.props.label;
    return (
      <li
        className={label == activeTab ? styles.current : ""} 
        key={label}
      >
        <a href="#" onClick={(e) => handleClick(e, label)}>{label}</a>
      </li>
    )
  })}
</ul>
{/* 下面的内容区遍历也替换为childList.map */}
{childList.map((tabcontent1) => {
  if (tabcontent1.props.label == activeTab)
  return (
    <div key={tabcontent1.props.label} className={styles.content}>{tabcontent1.props.children}</div>
  );
})}

3. 可选的健壮性补充 #

如果存在子节点未传label属性的场景，可以在初始化时再加一层兜底：

const [activeTab, setActiveTab] = useState(() => {
  return childList.length > 0 ? (childList[0].props.label ?? '') : ''
})

修改完成后本地模拟无children、单个子节点的场景测试无报错后，再打包部署即可解决该问题。

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