TypeScript条件渲染报错：无法读取undefined的属性'0'的解决方法

我懂你遇到的这个坑！你说得完全没错——当patient.address本身是undefined或者null的时候，直接访问patient.address[0]会立刻触发类型错误，因为你没法从一个不存在的数组里读取第0项。下面给你几个实用的解决方案：

1. 用可选链操作符（Optional Chaining）+ 空值合并操作符（Nullish Coalescing） #

这是现在最简洁也最推荐的写法，ES2020和TypeScript 3.7+都支持。它会在每一步访问属性/索引前检查前面的值是否存在，一旦遇到null或undefined就直接停止，不会继续往下访问：

// other code...
{patient.address?.[0]?.line?.[0] ?? null}
// other code...

• ?.[0]：检查patient.address是否存在，存在的话再取第0项，不存在就返回undefined
• ?? null：把最终的undefined转换成null，这样React就不会渲染任何内容（如果直接返回undefined其实也不会渲染，但写null更明确）

如果你的业务场景中，line[0]可能是空字符串、0这类“假值”但你依然想渲染它，那??就很合适；如果连空字符串也不想渲染，可以换成|| null。

2. 逐步进行存在性检查（兼容旧环境） #

如果你的项目环境还不支持可选链（现在这种情况很少见了），可以用传统的短路判断，一步步确认每一层都存在：

// other code...
{
  patient.address && 
  patient.address[0] && 
  patient.address[0].line && 
  patient.address[0].line[0] 
  ? patient.address[0].line[0] 
  : null
}
// other code...

这种写法虽然能解决问题，但代码比较冗长，多层嵌套时可读性会很差，所以优先推荐第一种方案。

3. 用TypeScript类型定义提前规避风险 #

如果你能控制patient的类型定义，可以给address标记为可选数组，让TypeScript在编译阶段就提醒你做存在性检查，避免运行时错误：

interface Address {
  line: string[];
  // 其他地址相关字段，比如 city、postcode 等
}

interface Patient {
  address?: Address[]; // 用?标记为可选属性
  // 其他患者信息字段
}

这样当你直接写patient.address[0]时，TypeScript会立刻报错，提示你可能访问了undefined的属性，从根源上减少这类问题。

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