Vue模板访问数组对象属性报Cannot read property of undefined错误

组件首次渲染时，plans是初始空数组，此时plans[0]为undefined，模板直接访问plans[0].name会触发“无法读取undefined的name属性”错误。异步请求完成后数组虽被填充，但初始渲染阶段的错误已经抛出。而直接渲染plans[0]不会报错，是因为Vue会对undefined做容错处理，不会尝试读取其内部属性。

1. 使用可选链操作符（最简洁） #

在模板中通过?.语法避免访问undefined属性：

<h1>{{ plans[0]?.name }}</h1>

当plans[0]不存在时，表达式会返回undefined，不会抛出错误。

2. 添加v-if条件判断 #

确保只有当plans[0]存在时才渲染对应内容：

<h1 v-if="plans[0]">{{ plans[0].name }}</h1>

或者通过数组长度判断：

<h1 v-if="plans.length > 0">{{ plans[0].name }}</h1>

3. 初始化默认占位值 #

如果确定数组至少有一个元素，可以在data中给plans初始化占位对象：

data() {
    return {
        plans: [{}], // 初始占位
    }
}

这种方法适合固定结构场景，但灵活性较差。

4. 利用计算属性封装 #

创建计算属性处理空数组的情况：

computed: {
    firstPlan() {
        return this.plans[0] || {}
    }
}

模板中使用：

<h1>{{ firstPlan.name }}</h1>

你当前直接访问文档的_document内部属性（如productsQuerySnap.docs[i]["_document"]["data"]["value"]["mapValue"]["fields"]["name"]["stringValue"]），这种方式依赖Firestore内部实现，版本更新时可能失效。官方推荐使用doc.data()方法获取文档数据：

// 替换原来的name获取逻辑
const name = productsQuerySnap.docs[i].data().name;
// 价格获取同理
const price = pricesQuerySnap.docs[0].data().unit_amount;

代码更简洁，也更稳定。

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