React+TypeScript中如何访问空对象的属性？求解决方案

你的问题核心是state的类型为User | {}，克隆后clone继承了这个联合类型。TypeScript无法确定clone到底是User还是空对象：直接访问clone.name会因空对象无name属性报错；使用可选链clone?.name会返回string | undefined，和你声明的string类型不匹配，因此仍报错。

以下是几种可行的解决方案：

1. 初始化state为合法的User类型值 #

最合理的方式是直接给state一个符合User接口的默认值，彻底避免联合类型：

// Component.tsx
import { useState } from 'react';
import { User } from './type';

const [state, setState] = useState<User>({ name: '', age: 0 });

const isValid = () => {
  const clone = { ...state };
  const name: string = clone.name; // 无报错，state类型确定为User
};

2. 使用类型断言（需确保此时state已为User） #

如果你能确定调用isValid时，state已经被填充为完整的User对象，可以用类型断言明确类型：

const isValid = () => {
  const clone = { ...state };
  const name: string = (clone as User).name;
};

注意：若此时clone仍是空对象，运行时会得到undefined，需确保前置逻辑已完成state赋值。

3. 给可选链结果添加默认值 #

用空值合并运算符??处理undefined情况，确保返回值符合string类型：

const isValid = () => {
  const clone = { ...state };
  const name: string = clone?.name ?? ''; // 若name不存在则用空字符串兜底
};

4. 类型守卫判断对象类型 #

通过类型守卫让TypeScript自动推断clone的类型：

const isValid = () => {
  const clone = { ...state };
  // 检查对象是否符合User接口结构
  if ('name' in clone && typeof clone.name === 'string' && 'age' in clone && typeof clone.age === 'number') {
    const name: string = clone.name; // 此处clone被推断为User类型
    // 执行后续逻辑
  } else {
    // 处理state仍为空对象的情况，比如提示用户完善信息
  }
};

内容的提问来源于stack exchange，提问作者고윤태