调用API获取国家列表时报response.map is not a function类型错误

云上老周

2026-8-30

问题原因

TypeScript类型标注仅做编译时校验，不会约束接口运行时的实际返回值。你调用的接口返回值不是直接的国家数组，而是带countries字段的对象，国家列表实际存在于data.countries属性下。你直接返回整个响应对象，拿到的自然不是数组类型，访问.length、调用.map()都会触发报错。

修复代码

修改getCountries方法，取出响应中实际的数组字段再返回，同时增加数组类型校验兜底：

const getCountries = async (): Promise<CovidInfo[]> => {
    try {
        const response = await fetch("https://covid19.mathdro.id/api/countries");
        const data = await response.json();
        // 从响应对象中取出国家数组，非数组场景兜底返回空数组
        return Array.isArray(data.countries) ? data.countries : [];
    } catch (error) {
        console.log(error);
        return [];
    }
};

注意事项