如何读取联合类型的状态变量中的字段？

你的问题核心是TypeScript无法自动缩小联合类型的范围——虽然你用了空值守卫排除了null，但剩下的{ cm: number } | { ft: number; in: number }分支里，TS无法确定当前height.value到底属于哪一个，所以直接访问ft会报错。以下是几种可靠的解决方法：

方法1：自定义类型谓词（推荐） #

写一个自定义类型守卫函数，明确判断当前值是否属于英尺英寸类型，让TypeScript精准缩小类型范围：

// 定义你的联合类型
type HeightValue = { cm: number } | { ft: number; in: number } | null;

// 自定义类型守卫
function isFeetInches(value: HeightValue): value is { ft: number; in: number } {
  return value !== null && 'ft' in value;
}

// 使用示例
const ftPlaceholder = isFeetInches(height.value) ? height.value.ft.toString() : '';

方法2：内联类型守卫 #

如果不想单独写函数，可以直接在表达式里用in操作符做内联判断：

const ftPlaceholder = height.value && 'ft' in height.value 
  ? height.value.ft.toString() 
  : '';

或者结合可选链简化：

const ftPlaceholder = ('ft' in (height.value ?? {})) 
  ? height.value?.ft.toString() ?? '' 
  : '';

方法3：类型断言（谨慎使用） #

如果你能100%确定当前height.value一定是英尺英寸类型，可以用类型断言强制告诉TS类型，但这种方式跳过了TS的类型检查，存在运行时风险：

const ftPlaceholder = (height.value as { ft: number; in: number })?.ft?.toString() ?? '';

为什么之前的空值守卫没用？ #

空值守卫（比如height.value?.）只是排除了null分支，但剩下的两个对象类型{ cm: number }和{ ft: number; in: number }没有明确的区分标识，TS无法自动推断，必须通过in操作符或自定义类型守卫来进一步缩小范围。

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