在NextJS(TypeScript)中获取POST数据的类型标注与序列化问题

1. 核心错误：getServerSideProps参数结构错误 #

你的第二个代码里，getServerSideProps的参数写法完全错误——Next.js中getServerSideProps接收的是一个上下文对象，而非直接的req和res参数。你错误地把解构后的参数当成了直接入参，导致函数无法正确获取请求对象，这是引发后续问题的关键原因之一。

2. 类型定义过于严格 #

扩展NextApiRequest时，你将body定义为必有的{ input: string }，但实际场景中：

• GET请求时req.body本身就是undefined
• POST请求如果表单未传入input字段，req.body.input也会是undefined
  这种不符合实际的类型定义会误导TypeScript，同时触发Next.js的序列化错误（不允许返回undefined作为页面props）。

修复后的完整代码 #

import { promisify } from 'util';
import bodyParser from 'body-parser';
import type { NextApiRequest, GetServerSidePropsContext } from 'next';

const getBody = promisify(bodyParser.urlencoded({ extended: true }));

// 扩展请求类型，匹配实际运行时的可能值
interface ExtendedNextApiRequest extends NextApiRequest {
  body?: {
    input?: string;
  };
}

export async function getServerSideProps({ req, res }: GetServerSidePropsContext & { req: ExtendedNextApiRequest }) {
  if (req.method === "POST") {
    await getBody(req, res);
  }

  // 将undefined转换为null，避免序列化错误
  return {
    props: {
      input: req.body?.input ?? null
    }
  };
}

关键细节说明 #

• 修正参数结构：基于GetServerSidePropsContext（Next.js内置的上下文类型），通过交叉类型注入扩展后的请求类型，确保函数签名符合框架要求。
• 宽松且准确的类型定义：给body和input加上可选标记?，匹配实际请求中的可能状态。
• 解决序列化问题：使用空值合并运算符??将undefined转换为null，满足Next.js对页面props的序列化规则（禁止返回undefined）。

额外优化建议 #

如果希望更严谨地区分POST和GET请求的类型，可以添加类型守卫：

function isPostRequest(req: NextApiRequest): req is ExtendedNextApiRequest & { method: 'POST' } {
  return req.method === 'POST';
}

// 在getServerSideProps中使用
if (isPostRequest(req)) {
  await getBody(req, res);
  // 此时TypeScript会自动识别req.body可能存在，提供更精准的类型提示
}

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