Next.js TypeScript项目POST接口无法返回预期JSON数据问题

针对你遇到的「API能打印前端传入的数据，但返回时无对应数据，硬编码则正常」的问题，可按以下方向排查修复：

1. 确保TypeScript类型定义正确匹配 #

未明确req.body的类型可能导致序列化异常——即使控制台能打印数据，TS编译后的代码也可能存在隐式处理问题。给API路由添加明确的类型定义：

import type { NextApiRequest, NextApiResponse } from 'next';

// 定义请求体的类型
interface RequestBody {
  data: number[];
}

export default function handler(
  req: NextApiRequest & { body: RequestBody },
  res: NextApiResponse<RequestBody>
) {
  if (req.method === 'POST') {
    console.log(req.body); // 确认数据正常
    res.status(200).json(req.body); // 明确返回匹配类型的数据
  } else {
    // 处理非POST请求，确保响应终止
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

2. 检查异步逻辑是否正确等待 #

如果API路由中包含异步操作（如数据处理、外部请求），必须用async/await确保操作完成后再返回响应，避免函数提前结束导致响应未发送：

import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    // 示例：模拟异步数据处理
    const processedData = await new Promise(resolve => {
      setTimeout(() => resolve(req.body), 100);
    });
    res.status(200).json(processedData);
  } else {
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

3. 确认响应被正确终止 #

Next.js API路由要求必须调用res.json()、res.send()或res.end()终止响应，所有请求分支都要覆盖到，不能遗漏任何场景的响应处理。

4. 验证前端请求的Content-Type设置 #

前端发起POST请求时，需确保设置Content-Type: application/json，否则Next.js可能无法正确解析请求体。示例前端请求代码：

fetch('/api/your-endpoint', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ data: [1,2,3,4] }),
});

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