TS2339报错：类型“{}”上不存在属性“joiner”的TypeScript问题求助

错误原因 #

报错Property 'joiner' does not exist on type '{}'. TS2339的核心是TypeScript无法推断data状态的正确类型：
你初始化data时写的是useState({})，TypeScript会自动将data的类型推导为{}（空对象类型），空对象上不存在joiner属性，所以访问data.joiner时直接触发类型校验报错，该报错和Player组件的props是否设置为any无关。

解决方案 #

方案1：定义明确类型（最推荐） #

先根据你的JSON结构定义对应的TypeScript接口，再给useState指定泛型，是符合TS规范的长期方案：

// 定义结构对应的类型
interface UserInfo {
  weakness: string;
  address: string;
  image: string;
}

interface ListingDataType {
  price: number;
  status: string;
  creator: UserInfo;
  joiner: UserInfo;
}

// 给useState指定泛型，初始值可设为null方便非空判断
const [data, setData] = useState<ListingDataType | null>(null);

// 渲染时增加非空判断即可
<Player 
  weakness={loading || !data ? '' : data.joiner.weakness}
  // 其他props不变
/>

方案2：临时指定any类型（适合快速调试） #

如果暂时不需要严格类型校验，可以直接给data指定any类型跳过检查：

const [data, setData] = useState<any>({});

方案3：访问时做类型断言（适合临时修复） #

不修改state定义的情况下，访问属性时断言为any+可选链规避报错：

weakness={loading ? '' : (data as any)?.joiner?.weakness || ''}

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