嵌套.map函数时出现Cannot read properties of undefined (reading 'map')错误

错误原因 #

虽然你确认所有数据对象都包含listItems字段，但触发「TypeError: Cannot read properties of undefined (reading 'map')」的核心原因是在某个渲染时刻item.listItems被判定为undefined，可能的诱因包括：

• 导入路径错误：组件中导入的是./Data，但实际数据文件是FooterData.js，若未正确匹配文件名/路径，会导致Data不是预期的数组；
• 渲染阶段的潜在未定义场景：即使数据本身正确，组件首次渲染时可能存在item未完全初始化的情况，导致listItems无法被读取。

解决方案 #

1. 修正数据导入路径 #

确保导入的是正确的数据文件：

// 将原导入语句替换为
import Data from './FooterData';

2. 添加可选链保护 #

在嵌套map时使用可选链操作符?.，避免因listItems未定义导致的报错：

{item.listItems?.map((innerItem) => (
  <ListItem key={innerItem.link}>
      {innerItem.label}
  </ListItem>
))}

3. 优化渲染逻辑（避免重复内容） #

你的代码中第一个Box已经展示了main分类的内容，后续Data.map会再次渲染该分类，导致内容重复。可通过过滤掉main项解决：

{Data.filter(item => item.category !== 'main').map((item) => (
  <Box key={item.id}>
    <Text as='h4'>
      {item.category}
    </Text>
    <UnorderedList>
      {item.listItems?.map((innerItem) => (
        <ListItem key={innerItem.link}>
            {innerItem.label}
        </ListItem>
      ))}
    </UnorderedList>
  </Box>
))}

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