Angular子组件访问传入嵌套对象属性报undefined错误

• 核心错误是前后端字段名拼写不匹配：你贴出的接口实际返回的JSON数据里，地址对象的键名是adress（仅1个字母d），但你前端TS接口定义、模板代码里访问的属性名全是address（2个字母d）。
• 为什么一级属性渲染正常：firstName、email这类一级属性的前后端拼写完全一致，所以可以正常读取渲染。
• 为什么你之前的防御写法没生效：
  • 你写的*ngIf="customer"仅判断了customer对象本身存在，没有判断你要访问的address属性存在——而customer对象确实是存在的，只是它下面没有你写的address这个键，customer.address实际值是undefined，再往下读取.country自然会抛出类型错误。
  • 你用可选链操作符customer.address?.country时，仅能避免报错，但因为字段名写错，根本读不到实际存在于adress字段下的国家数据，所以页面显示为空。
• 为什么控制台打印全量JSON能看到地址数据：JSON序列化是把对象所有自有键值都打印出来，你能看到数据是因为数据实际存在于拼写错误的adress字段下，不代表你用错误的键名能读到它。

二选一即可，推荐优先统一正确拼写：

1. 最优方案：修改后端接口返回字段，把错写的adress改成正确拼写address，和前端现有定义保持一致，后续维护不会出问题。
2. 快速适配方案：前端全量修改字段名匹配后端返回：
   • 把Customer接口里的address: Address;改为adress: Address;
   • 把模板里所有访问地址属性的路径从customer.address.xxx改为customer.adress.xxx

修复后可以补一层嵌套属性的防御性判断，避免接口数据异常时页面报错，示例：

<!-- 可选链写法 -->
<p class="text-muted">{{customer.adress?.country}}</p>

<!-- 或者*ngIf判断写法 -->
<p class="text-muted" *ngIf="customer.adress">{{customer.adress.country}}</p>

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