引言：当TS遇上React的useState

在使用React + TypeScript开发时，useState堪称高频API。但当状态对象结构稍复杂，常会遇到刺眼的类型报错："Property 'username' does not exist on type 'User | null'"。本文将解析该报错的根源，并给出3种实用解决方案，让你的TS开发更丝滑。

正文：问题解析与解决方案

🔍 为什么会出现这个报错？

TypeScript是静态类型检查工具。当使用useState初始化状态时，TS会自动推断初始值的类型。如果初始值是null或空对象，后续操作未定义属性就会触发类型错误。

❌ 错误示范（经典踩坑）：

interface User {
  name: string;
  age: number;
}

const [user, setUser] = useState<User | null>(null);

// 触发报错！因为此时user可能是null
console.log(user.name); // Error: Property 'name' does not exist on type 'User | null'

🚀 3种实用解决方案（附代码）

1. 方案一：明确初始状态结构（推荐）

   
   

   避免使用null，为状态提供完整初始值：

   const [user, setUser] = useState<User>({
     name: '',  // 符合User接口结构
     age: 0
   });

2. 方案二：类型守卫（Type Guard）

   
   

   操作前检查user不为null：

   if (user !== null) {
     console.log(user.name); // 安全访问
   }

3. 方案三：可选链操作符（?.）

   
   

   ES2020新特性，与TS完美兼容：

   console.log(user?.name); // 输出undefined但不报错

💡 实战案例：用户信息表单更新

interface Profile {
  username: string;
  bio?: string; // 可选属性
}

const ProfileForm = () => {
  // ✅ 正确初始化（包含所有必填字段）
  const [profile, setProfile] = useState<Profile>({ 
    username: '匿名用户',
    bio: ''
  });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // ✅ 安全更新嵌套属性（TS自动识别bio为可选string）
    setProfile({ ...profile, [e.target.name]: e.target.value });
  };

  return <input name="bio" onChange={handleChange} />;
}

结论：类型安全 = 开发安心

TypeScript的类型报错看似恼人，实则是预防运行时错误的利器。针对useState的常见类型问题：

• 优先提供完整初始状态避免null
• 善用可选链(?.)简化判空逻辑
• 复杂对象推荐明确接口声明

掌握这些技巧，你将显著减少"Property does not exist"类报错，提升React+TS应用的开发效率和健壮性。