Next.js的getServerSideProps中axios请求后data调用map报type never错误如何解决

这个报错的核心原因是TypeScript无法自动推断axios请求返回的data字段类型，默认将其判定为never类型，而never类型不存在map方法，因此触发了类型校验错误。实际运行正常是因为运行阶段不会执行TypeScript类型校验。

解决方案 #

方案1：指定泛型（推荐）

先定义返回数据的类型，再给axios的get方法传入对应泛型，是最符合TypeScript规范的写法：

// 先定义用户数据类型，可根据实际接口返回字段调整
interface User {
  id: number;
  name: string;
  created_at: string;
}

export const getServerSideProps: GetServerSideProps = async () => {
  // 给get方法传入<User[]>泛型，声明返回的data是User类型的数组
  const { data } = await api.get<User[]>("/users/index", { 
    params: {
      _limit: 12,
      _sort: "created_at", 
      _order: "desc"
    }
  })

  const users = data.map(user => { 
    return {
      id: user.id,
      name: user.name,
      created_at: user.created_at,
    }
  });
  // 后续逻辑
}

方案2：类型断言（快速修复）

如果不需要完整类型校验，只想临时消除报错，可以给data添加类型断言：

// 断言为任意数组
const users = (data as any[]).map(user => {
  return {
    id: user.id,
    name: user.name,
    created_at: user.created_at,
  }
});

// 也可以直接写更精准的断言
const users = (data as {id:number; name:string; created_at:string}[]).map(user => {
  return {
    id: user.id,
    name: user.name,
    created_at: user.created_at,
  }
});

注意：如果你使用的是二次封装的axios实例，需要确认封装逻辑没有破坏axios原生的泛型传递能力，正常封装的实例都可以直接使用上述泛型写法。

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