TypeError:读取undefined的forEach属性报错是什么原因

TypeError: Cannot read properties of undefined (reading 'forEach')是前端开发中常见的类型错误，核心触发逻辑是：你尝试调用forEach方法的目标变量实际值为undefined。
JavaScript中只有数组、NodeList、Map、Set这类实现了可迭代接口的内置类型才自带forEach实例方法，undefined是原始值类型，不存在任何实例方法，直接在上面调用forEach就会抛出该错误。
常见触发场景包括：

• 接口返回不符合预期：预期接口返回列表数组，但实际接口报错、权限拦截、返回结构调整，导致你取到的列表字段是undefined，未做判断直接调用forEach
• 数据取值路径错误：从props、状态管理、全局对象中取列表字段时路径写错，比如把res.data.list写成res.list，最终拿到的值为undefined
• 变量初始化缺失：列表类变量没有设置初始值，默认值为undefined，代码执行顺序问题导致遍历逻辑先于赋值逻辑执行
• DOM查询返回异常：如果封装的DOM查询方法没有匹配到元素时返回undefined而非空集合，直接调用forEach也会报错

• 第一步先定位报错对应代码行：打开浏览器控制台的错误堆栈，直接定位到抛出错误的代码行，确认是哪个变量在调用forEach，在该行前加日志打印该变量的实际值，确认其为undefined的触发路径

// 示例：定位到报错行为 data.userList.forEach(xxx)
// 在前一行加打印
console.log('遍历目标值：', data.userList)

• 给遍历目标增加兜底防护：所有调用forEach的位置，对可能为undefined的变量提前做空数组兜底，避免页面直接崩溃

// 不推荐的写法：无任何防护
userList.forEach(item => renderItem(item))

// 推荐写法1：短路运算兜底空数组
(userList || []).forEach(item => renderItem(item))

// 推荐写法2：解构/赋值时直接设置默认值
const { userList = [] } = await fetchUserListApi()
// 框架响应式数据初始化直接设为空数组
const [userList, setUserList] = useState([])

• 根因排查修正：加兜底只是防崩溃的临时手段，还是要顺着触发路径修正根因：接口场景核对返回结构、加请求成功判断；取值场景核对字段路径；DOM操作场景判断查询结果是否有效；时序问题场景调整执行顺序，确保遍历逻辑在列表赋值完成后再触发。

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