React+TypeScript报Property 'ID'不存在于never类型ts(2339)如何解决？

报错根本原因 #

你当前使用的是TypeScript开发环境，当你给useState传入初始值[]时，TypeScript无法推断这个数组中存储的元素类型，会默认将playersData的类型推导为never[]，意思是这个数组永远不会存放任何有效值，所以当你遍历数组访问data.ID这类属性时，就会触发「never类型上不存在对应属性」的报错。

之前其他项目没有触发报错的常见原因有两个：

• 其他项目是JavaScript项目，没有静态类型检查规则
• 其他项目的TypeScript严格模式配置更低，或者你之前写代码时主动给useState加了类型声明，没有留意到这个细节

修复方案 #

步骤1：定义玩家数据的类型接口 #

在组件代码上方先声明和后端接口返回结构匹配的类型：

interface Player {
  ID: number;
  Handle: string;
  Role: string;
  // 如果接口还有其他返回字段，在这里补全即可
}

步骤2：给useState添加泛型声明 #

把原来的状态声明行：

const [playersData, setPlayersData] = useState([]);

修改为：

const [playersData, setPlayersData] = useState<Player[]>([]);

修改完成后TypeScript就能识别playersData是存储Player类型对象的数组，遍历出来的data自然就能正常访问ID、Handle、Role这些属性了。

可选优化 #

你当前的fetch逻辑缺少请求失败的处理，建议补充异常分支避免页面静默失败：

useEffect(() => {
  setIsLoading(true);
  fetch('http://localhost:44326/api/Players')
    .then((response) => {
      if (response.ok) {
        return response.json();
      }
      throw new Error('请求玩家数据失败')
    })
    .then((data: Player[]) => setPlayersData(data))
    .catch(err => console.error(err))
    .finally(() => setIsLoading(false))
}, []);

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