Vue子组件访问父传data对象嵌套属性报undefined错误是什么原因？

问题原因 #

• 第一个核心原因是父组件的comment props是异步获取的：父组件初始渲染时comment还没有从接口/异步逻辑拿到值，初始为undefined或空对象，此时setup中生成的data要么是undefined，要么访问props.comment.score时生成异常值，子组件第一次渲染拿到的data就是undefined，你直接访问data.score会直接抛出类型错误，阻塞渲染，所以看不到后续异步数据返回后的更新结果。而你直接渲染{{ data }}时，初始undefined不会抛出阻塞错误，等异步数据返回、组件更新后就能正常显示完整对象。
• 第二个原因是你第二种子组件props写法不符合Vue语法规范：Vue的props定义不支持直接在prop字段下嵌套写子属性的类型，你第二种写法会导致Vue无法正确识别data prop的定义，最终$props.data为undefined，访问属性自然报错。

解决方案 #

1. 父组件加条件渲染控制：等comment有有效值后再渲染子组件，避免初始空值传递

<template>
  <vote-buttons v-if="comment" :data="data"></vote-buttons>
</template>

2. 给父组件comment props设置默认值：保证初始状态下comment有完整的结构，不会出现属性访问异常

props: {
  comment: {
    type: Object,
    default: () => ({
      score: 0,
      hasVoteOfUser: false
    })
  }
}

3. 子组件使用可选链访问属性：Vue3模板原生支持可选链语法，就算data初始为undefined也不会抛出阻塞错误

<!-- 子组件模板 -->
{{ data?.score }}

4. 修正子组件props定义：删除错误的嵌套属性写法，使用正确的Object类型定义

// 正确写法
props: {
  data: {
    type: Object,
    required: true // 可选，开启后传递空值会有控制台提示
  }
}

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