Vue初始化含元素数组时为何报‘Cannot read properties of undefined’错误？

错误原因 #

当你把usersList初始化为[1,2]这类非空数组时，Vue组件在首次渲染模板时会立即遍历这个数组：

• 数组里的元素是数字1、2，并非接口返回的用户对象结构
• 模板中尝试访问user.address.street，但数字类型的user没有address属性，因此会抛出Cannot read properties of undefined (reading 'street')的错误

而初始化为空数组时，v-for不会渲染任何<li>元素，首次渲染不会触发属性读取的错误。后续接口返回正确的用户对象数组后，Vue会重新渲染模板，页面能正常显示，但首次渲染的错误已经被控制台捕获。

解决办法 #

你可以通过以下几种方式避免这个错误：

1. 初始化符合数据结构的空数组 #

保持usersList初始为空数组（推荐），或设置为匹配接口返回结构的空对象数组：

data:() =>({
    usersList : [] // 或使用 [{}, {}] 提前匹配对象结构
})

2. 使用可选链操作符 #

在模板中通过?.防止属性不存在时报错：

<li v-for="user in usersList" :key="user.id">
  <b>Name:</b>{{user.name}}, 
  <b>UserName:</b> {{user.username}},
  <b>ZipCode:</b> {{user.address?.street}} 
</li>

3. 添加条件渲染判断 #

通过v-if确保user.address存在后再渲染对应内容：

<li v-for="user in usersList" :key="user.id">
  <b>Name:</b>{{user.name}}, 
  <b>UserName:</b> {{user.username}},
  <span v-if="user.address">
    <b>ZipCode:</b> {{user.address.street}} 
  </span>
</li>

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