调用TMDB第三方API时Axios.get的TypeScript类型定义报错如何解决

问题根因 #

axios 的响应对象自带固定结构：{ data: 接口返回值, status: 状态码, statusText: 状态文本, headers: 响应头 }。你传入 axios.get<T> 的泛型 T 对应的是响应对象中 data 字段的类型，也就是 API 实际返回的原始响应体类型，你当前的类型定义多嵌套了一层 data 结构，导致取值时类型匹配失败。

解决方案 #

根据你实际的 API 返回结构二选一即可：

场景1：API 原始返回值（可在浏览器网络面板查看）确实包含外层 data 字段 #

也就是你贴的 JSON 就是接口直接返回的内容：

{
  "data": {
    "results": [
      {
        "name": "Free Guy",
        "poster_path": "/yc2IfL701hGkNHRgzmF4C6VKO14.jpg"
      },
      {
        "name": "Squid Game",
        "poster_path": "/uu4TgyyW259aOZHN0Ew4TEfjnUG.jpg"
      }
    ]
  }
}

对应代码修改为：

interface MovieType {
  name: string
  poster_path: string
}

// 对应API原始返回的整体结构
interface ApiResponseType {
  data: {
    results: MovieType[]
  }
}

// 状态定义可简化，空数组本身符合MovieType[]类型要求
const [movies, setMovies] = useState<MovieType[]>([])

// 泛型传入API原始返回类型
const request = await axiosInstance.get<ApiResponseType>(fetchUrl)
// 第一层data是axios响应自带的，第二层data是接口返回的字段
setMovies(request.data.data.results)

场景2：你贴的 JSON 是打印 axios 返回的 request 对象得到的结构 #

这种情况说明 API 实际返回的内容只有 { results: [...] }，外层的 data 是 axios 响应对象自带的，你多写了一层类型嵌套，修改如下：

interface MovieType {
  name: string
  poster_path: string
}

// 直接对应API返回的结构，不需要额外套data
interface ApiResponseType {
  results: MovieType[]
}

const [movies, setMovies] = useState<MovieType[]>([])

const request = await axiosInstance.get<ApiResponseType>(fetchUrl)
// 直接取响应data里的results即可
setMovies(request.data.results)

另外你之前尝试的将 results 定义为单个对象而非数组的写法也是错误的，需要保持 results 为 MovieType[] 数组类型。

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