使用map函数时报错TypeError: Cannot read properties of undefined (reading 'map')怎么解决

这个报错的核心是你尝试调用map方法的变量值为undefined，而非预期的数组类型。map是仅JavaScript数组原型上挂载的方法，undefined、null、普通对象等非数组类型调用该方法都会触发该类型错误。

常见触发场景与修复方案 #

• 场景1：变量初始化未设置默认空数组
  声明数组变量时未给初始值，比如React中写const [list, setList] = useState()，普通JS中写let data;，初始值默认为undefined，首次渲染/执行时直接调用map就会报错。
  修复方案：声明时直接给空数组作为默认值：

  // 普通JS声明
  let data = [];
  // React useState声明
  const [list, setList] = useState([]);
  

• 场景2：接口/外部传入的嵌套字段不存在
  比如你预期后端返回的数据结构为{ data: { userList: [xxx] } }，但后端接口异常、字段名调整时，res.data.userList会返回undefined，直接调用map就会报错。
  修复方案：调用前加可选链+空值兜底，或者提前做数组类型校验：

  // 方案1：可选链+空值兜底
  (res?.data?.userList || []).map(item => /* 你的业务逻辑 */)
  // 方案2：类型校验后再调用
  const userList = res?.data?.userList;
  if (Array.isArray(userList)) {
    userList.map(item => /* 你的业务逻辑 */)
  }
  

• 场景3：变量赋值逻辑有分支遗漏
  如果你仅在if分支中给数组变量赋值，未覆盖else分支，也会导致变量最终为undefined。
  修复方案：覆盖所有赋值分支，兜底赋值为空数组。

调试技巧 #

调用map前打印目标变量的类型与值，确认是否符合预期：
console.log('目标变量类型', typeof yourVariable, '是否为数组', Array.isArray(yourVariable), '变量值', yourVariable)

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