如何解决代码出现的TypeError: cannot read property of undefined错误？

嘿，这个错误我太熟了！基本上就是你尝试访问一个未定义（undefined）值的属性导致的，我给你列几个最常见的排查和解决思路：

1. 变量/对象未初始化就访问属性 #

比如你写了user.name，但user根本没被赋值，还是undefined，自然没法读取它的name属性。

• 解决思路：确保在访问属性前，变量已经被正确定义和赋值。可以加个存在性判断，或者用ES2020引入的可选链操作符简化代码：

  // 传统判断方式
  if (user) {
    console.log(user.name);
  }
  // 可选链操作符，更简洁
  console.log(user?.name);
  

2. API返回数据不符合预期 #

比如你调用接口后，默认认为会返回data.user字段，但实际接口可能返回null，或者压根没有user这个属性，这时候访问data.user.name就会触发报错。

• 解决思路：先打印接口返回的完整数据，确认结构是否和你预期的一致。同时可以用可选链+默认值兜底，避免报错：

  const userName = data?.user?.name || '匿名用户';
  

3. 数组索引越界或元素为undefined #

比如你有个数组arr = [1, 2]，却尝试访问arr[5].value——arr[5]本身就是undefined，自然没法读取它的value属性。

• 解决思路：先检查数组长度或者目标元素是否存在，再访问属性：

  // 先判断索引是否在数组范围内，且元素存在
  if (arr.length > 5 && arr[5]) {
    console.log(arr[5].value);
  }
  // 用可选链简化
  console.log(arr[5]?.value);
  

4. 函数参数未传递导致undefined #

比如你定义了function getPersonAge(person) { return person.age; }，但调用时没传参数getPersonAge()，这时候person就是undefined，访问person.age就会报错。

• 解决思路：给函数参数设置默认值，确保参数始终是一个有效的对象：

  function getPersonAge(person = { age: 0 }) {
    return person.age;
  }
  

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