React组件传参后map函数报错：Cannot read properties of undefined

核心原因 #

这个报错的本质是组件第一次渲染时，传入的menuItems是undefined——此时调用map自然会触发Cannot read properties of undefined (reading 'map')。虽然之后数据加载完成，props能拿到正确的数组，甚至map里的console.log能输出内容，但初始渲染的报错已经打乱了组件的渲染流程，导致最终无法正常展示内容。

而直接在NavLinks里定义数组时，组件初始就有有效值，不会碰到这个问题。

解决办法 #

1. 给组件props设置默认空数组 #

在NavLinks组件里，给接收的数组props设置默认值为空数组，从根源避免初始值为undefined：

// NavLinks.jsx
function NavLinks({ menuItems = [] }) {
  return (
    <nav>
      {menuItems.map(item => (
        <a key={item.id} href={item.url}>{item.name}</a>
      ))}
    </nav>
  )
}

2. 渲染前做空值校验 #

在调用map之前，先判断数组是否存在，或者用可选链操作符简化判断：

// 方式一：普通条件判断
{menuItems && menuItems.map(item => (
  <a key={item.id} href={item.url}>{item.name}</a>
))}

// 方式二：可选链 + 空值合并（更简洁）
{menuItems?.map(item => (
  <a key={item.id} href={item.url}>{item.name}</a>
)) ?? null}

3. 确保父组件初始传递有效值 #

在Navbar里，给要传递的数组设置初始空数组，而不是让它默认是undefined：

// Navbar.jsx
function Navbar() {
  // 初始设为空数组，避免第一次传递undefined
  const [menuItems, setMenuItems] = useState([]);

  // 假设是异步获取导航数据的逻辑
  useEffect(() => {
    fetch('/your-menu-api')
      .then(res => res.json())
      .then(data => setMenuItems(data));
  }, []);

  return <NavLinks menuItems={menuItems} />;
}

补充说明 #

你能看到props有数据、map里的console.log能输出，是因为数据加载完成后组件会重新渲染，但初始渲染的报错已经导致组件进入异常状态，所以即使后续有数据也无法正常渲染内容。只要解决了初始值为undefined的问题，组件就能正常完成渲染更新。

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