如何使用map()遍历含嵌套对象数组的对象数组？

错误根源很明确：部分对象没有subs属性，或是subs的值为undefined，这时直接调用map()自然会抛出Cannot read properties of undefined (reading 'map')异常。核心解决思路就是先确认subs是有效数组，再执行遍历，同时用递归处理多层嵌套结构。

以下是两种常见场景的实现代码：

1. React场景：递归列表组件 #

function NestedList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>
          {item.name}
          {/* 用可选链判断subs存在，且有元素才递归渲染子列表 */}
          {item.subs?.length > 0 && <NestedList items={item.subs} />}
        </li>
      ))}
    </ul>
  );
}

// 测试数据
const menuItems = [
  { id: 1, name: '首页' },
  { id: 2, name: '产品', subs: [
    { id: 21, name: '硬件' },
    { id: 22, name: '软件', subs: [{ id: 221, name: '移动端' }, { id: 222, name: 'PC端' }] }
  ] },
  { id: 3, name: '关于我们' }
];

// 直接在组件中使用即可
// <NestedList items={menuItems} />

这里用item.subs?.length > 0做双重判断：可选链?.会在subs不存在/为undefined时直接返回undefined，避免触发报错；同时只有子数组有内容时才渲染，避免生成空的ul标签。

2. 原生JavaScript：生成嵌套DOM列表 #

function createNestedList(items) {
  const ul = document.createElement('ul');
  
  items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item.name;
    
    // 严格判断subs是数组且有元素，再递归生成子列表
    if (Array.isArray(item.subs) && item.subs.length > 0) {
      li.appendChild(createNestedList(item.subs));
    }
    
    ul.appendChild(li);
  });
  
  return ul;
}

// 测试数据
const menuItems = [
  { id: 1, name: '首页' },
  { id: 2, name: '产品', subs: [
    { id: 21, name: '硬件' },
    { id: 22, name: '软件', subs: [{ id: 221, name: '移动端' }, { id: 222, name: 'PC端' }] }
  ] },
  { id: 3, name: '关于我们' }
];

// 插入到页面指定位置
document.body.appendChild(createNestedList(menuItems));

用Array.isArray(item.subs)精准判断是否为数组，再检查长度，彻底避免在非数组值上调用遍历方法的错误。

额外兜底技巧 #

如果你的数据中subs可能是null而非undefined，可以用空值合并操作符兜底，把非数组值转为空数组：

// 示例：即使item.subs是undefined或null，也能安全调用map
(item.subs ?? []).map(subItem => { /* 处理子项 */ })

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