TypeScript下Next.js API路由Response类型匹配报错解决

核心问题分析 #

你的代码有两个关键问题导致TypeScript报错：

1. callAxios函数未返回实际请求结果，类型为Promise<undefined>，无法匹配Response构造函数要求的参数类型
2. Response不能直接接收Promise或原生JS对象，需要传入可序列化的格式（如JSON字符串），同时明确响应头

具体修复方案 #

1. 定义后端返回数据的类型：给接口返回的数据声明TypeScript类型，让类型检查生效
2. 修正callAxios的返回逻辑：统一使用await风格（避免await和then混用），并给Axios请求指定泛型，明确返回数据类型
3. 正确构造Response：等待callAxios的异步结果，转为JSON字符串后传入Response，同时设置Content-Type头

完整修复代码 #

import axios from "axios"

// 根据后端实际返回结构定义类型，替换成你的接口字段
interface FirstCallResponse {
  // 示例字段，自行调整
  id: number;
  title: string;
  content?: string;
}

export async function GET(request: Request) {
  // 等待异步请求结果
  const data = await callAxios();
  // 将对象转为JSON字符串，设置正确响应头
  return new Response(JSON.stringify(data), {
    headers: {
      'Content-Type': 'application/json',
    },
  });
}

// 明确函数返回类型为Promise<FirstCallResponse>
async function callAxios(): Promise<FirstCallResponse> {
  // 给Axios.get指定泛型，让TypeScript识别res.data的类型
  const res = await axios.get<FirstCallResponse>('http://localhost:8080/firstCall', {
    params: {
      title: 'NEXT JS'
    },
    headers: {
      'X-Api-Key': 'my-api-key'
    },
  });
  console.log(res.data);
  return res.data;
}

额外说明 #

• 如果你不确定后端返回的具体结构，可以先用Record<string, unknown>作为临时类型，后续再补全具体字段
• 避免在async函数中同时使用await和then，两种风格混用容易导致返回值丢失或类型混乱

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