React+TypeScript中Axios请求报错Object is of type 'unknown'如何解决？

错误原因 #

你遇到的TS错误是因为Axios未指定请求返回数据的类型，TypeScript无法推断response.data的结构，默认将其标记为unknown类型，禁止直接访问其下的属性。

Object is of type 'unknown'.ts(2571)
(parameter) response: AxiosResponse<unknown, any>

具体修改步骤 #

1. 补充接口响应结构定义
   你已经定义了PokemonItem类型，当前调用的pokemon接口返回数据外层包裹了分页相关字段，需要额外定义响应结构，可放在你之前定义PokemonItem的文件中：

export interface PokeApiResponse {
  count: number;
  next: string | null;
  previous: string | null;
  results: PokemonItem[];
}

2. 给状态变量指定类型
   你当前的pokemon状态未声明类型，TS会默认推断为never[]，后续赋值会触发类型错误，修改为：

// 你存入的是宝可梦名称的集合，所以指定类型为string数组
const [pokemon, setPokemon] = React.useState<string[]>([]);

3. 给Axios请求传入泛型
   调用axios.get时传入定义好的响应类型，TS就可以正确推断response.data的结构，同时修正你原代码中接口地址缺失双斜杠的问题：

axios.get<PokeApiResponse>('https://pokeapi.co/api/v2/pokemon')
  .then((response) => {
    setPokemon(response.data.results.map((item) => item.name));
  });

额外注意点 #

你当前的Props定义中pokemonItem声明为PokemonItem[]数组类型，但代码中直接对它解构取name、height等属性，数组无法直接解构单个对象属性，需要调整为pokemonItem: PokemonItem或者取数组指定下标的元素再解构。

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