Next.js 14 POST请求报错TypeError: Body is unusable问题求助

在Next.js 14的API路由中POST用户详情，仅传递id和firstname时功能正常，但添加lastname等额外字段后，出现TypeError: Body is unusable错误。

可正常运行的代码 #

export async function POST(
  req: Request,
) {
  try {
    const { getUser } = getKindeServerSession();
    const authuser = await getUser()

    const id = await authuser?.id
    const { firstname } = await req.json();
   
    if (!id) {
      return new NextResponse("Unauthorized", { status: 401 });
    }

    const user = await db.user.create({
      data: {
        id,
        firstname: firstname,        
       }
    });

   console.log(user);

    return NextResponse.json(user);
  } catch (error) {
    console.log("[USER]", error);
    return new NextResponse("Internal Error", { status: 500 });
  }
}

正常运行时的输出 #

{
  id: 'kp_7e90fc74577e46bfb3133eb73ac8ed89',
  firstname: 'Louis2',
  lastname: null,
  grade: null,
  profilepicture: null,
  email: null,
  contactnumber: null,
  isActive: false,
  createdAt: 2024-04-16T19:01:21.871Z,
  updatedAt: 2024-04-16T19:01:21.871Z
}

添加lastname后无法运行的代码 #

export async function POST(
  req: Request,
) {
  try {
    const { getUser } = getKindeServerSession();
    const authuser = await getUser()

    const id = await authuser?.id
    const { firstname } = await req.json();
    const { lastname } = await req.json();
   
    if (!id) {
      return new NextResponse("Unauthorized", { status: 401 });
    }

    const user = await db.user.create({
      data: {
        id,
        firstname: firstname,  
        lastname: lastname,
       }
    });

   console.log(user);

    return NextResponse.json(user);
  } catch (error) {
    console.log("[USER]", error);
    return new NextResponse("Internal Error", { status: 500 });
  }
}

错误日志 #

[USER] TypeError: Body is unusable
    at specConsumeBody (node:internal/deps/undici/undici:5294:15)
    at tl.json (node:internal/deps/undici/undici:5196:18)
    at c (/var/task/.next/server/app/api/user/route.js:1:1075)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async /var/task/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:6:42484
    at async eI.execute (/var/task/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:6:32486)
    at async eI.handle (/var/task/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:6:43737)
    at async Y (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:16:24659)
    at async Q.responseCache.get.routeKind (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:1025)
    at async r2.renderToResponseWithComponentsImpl (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:507)

解决方案 #

问题核心是Request对象的请求体只能被读取一次，你连续调用了两次await req.json()，第一次调用已经消费完了请求体，第二次调用时请求体已经无法再被使用，所以抛出了"Body is unusable"错误。

修改方法：只调用一次req.json()，然后从解析后的对象中一次性解构所有需要的字段，同时注意authuser?.id不是Promise，不需要加await：

export async function POST(
  req: Request,
) {
  try {
    const { getUser } = getKindeServerSession();
    const authuser = await getUser()

    const id = authuser?.id;
    const { firstname, lastname } = await req.json();
   
    if (!id) {
      return new NextResponse("Unauthorized", { status: 401 });
    }

    const user = await db.user.create({
      data: {
        id,
        firstname,
        lastname,
       }
    });

   console.log(user);

    return NextResponse.json(user);
  } catch (error) {
    console.log("[USER]", error);
    return new NextResponse("Internal Error", { status: 500 });
  }
}

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