React+TypeScript报错：Property 'id' does not exist on type 'never[]'

你的错误根源在于：

• 初始把data的state设为了数组[]，但API返回的是单个用户对象（包含id属性）
• TypeScript根据初始值推断data类型为never[]，数组类型自然没有id属性，所以报错

修复步骤： #

1. 定义数据类型接口
   先明确API返回的用户数据结构，用TypeScript接口约束类型：

   interface UserDetails {
     id: string;
     // 可补充其他从API返回的属性，比如name、email等
   }
   

2. 修正State的初始值和类型
   初始状态下数据未加载，应该用null或undefined而非数组，同时指定类型为UserDetails | null：

   const [data, setdata] = useState<UserDetails | null>(null);
   

3. 渲染时处理空值情况
   虽然有加载遮罩，但TypeScript需要明确data可能为null的场景，可选两种处理方式：

   • 用可选链data?.id
   • 用条件渲染确保data存在后再访问id

修改后的完整代码： #

import LoadingOverlay from 'react-loading-overlay-ts';
import { useState, useEffect } from 'react';

// 定义用户数据类型
interface UserDetails {
  id: string;
  // 根据实际API返回补充其他属性
}

export default function App() {
    // 指定State类型为UserDetails或null，初始值设为null
    const [data, setdata] = useState<UserDetails | null>(null);
    const [isActive, setActive] = useState(true)
    
    const getData = async () => {
        const response = await fetch("https://myapi.xyz/users/details");
        const fetchedData = await response.json();
        setdata(fetchedData);
        setActive(prev => !prev)
    };
    
    useEffect(() => {
        getData();
    }, []);
    
    return (
        <LoadingOverlay active={isActive} spinner>
            <div className="App">
                {/* 用可选链处理data为null的情况 */}
                <p>{data?.id}</p>
            </div>
        </LoadingOverlay>
    );
}

这样修改后，TypeScript就能正确推断data的类型，既消除了报错，也符合类型安全的要求。

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