NextJS 13中Prisma注册用户出现PrismaClientValidationError问题

核心问题原因 #

在Next.js 13的App Router中，request.body并非直接可访问的JSON对象，必须通过await request.json()方法解析请求体后才能获取数据。你当前的API代码直接使用request.body，导致所有字段值为undefined，触发Prisma的验证错误。

第一步：修正API路由代码 #

修改src/app/api/user/route.js（注意Next.js 13 App Router的API路由文件名需为route.js，若当前文件名不符请同步调整）：

import prisma from "../../../lib/prisma";
import { NextResponse } from "next/server"

export async function POST(request) {
    // 关键：先解析请求体为JSON格式
    const body = await request.json();
    try {
        const newUser = await prisma.user.create({
            data: {
                cpf: body.cpf,
                name: body.name,
                email: body.email,
                password: body.password,
                phone: body.phone,
                gender: body.gender,
                // 转换日期格式为Prisma可识别的Date对象
                birth: new Date(body.birth),
                city: body.city,
                state: body.state,
                school: body.school,
                bio: body.bio,
                // avatar: body.avatar || null,
            }
        })
        return NextResponse.json({ data: newUser, success: true });
    } catch (error) {
        console.error('Request error', error)
        return NextResponse.json({ error: 'Error creating user', success: false }, { status: 500 });
    }
}

第二步：验证前端表单字段绑定 #

确保login/page.tsx中的cpf、name等变量正确绑定到表单输入框的value属性，示例逻辑如下：

import { useState } from 'react';

export default function LoginPage() {
  // 为每个表单字段定义状态
  const [cpf, setCpf] = useState('');
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  // ...其他字段的state定义

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    let body = { cpf, name, email, password, phone, gender, birth, city, state, school, bio};
    try {
      const response = await fetch('/api/user', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      })
      if (response.status !== 200) {
        throw new Error(await response.text())
      } else {
        console.log('Cadastro realizado com sucesso!');
      }
    } catch (error) {
      console.log(body);
      console.log(error);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* 示例输入框绑定 */}
      <input
        type="text"
        value={cpf}
        onChange={(e) => setCpf(e.target.value)}
        required
        placeholder="CPF"
      />
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        required
        placeholder="Nome"
      />
      {/* ...其他表单输入框 */}
      <button type="submit">Cadastrar</button>
    </form>
  )
}

若变量未正确绑定，会导致body对象中的字段值为空或undefined，同样触发Prisma验证错误。

第三步：日期字段格式兼容 #

由于你的Prisma Schema中birth字段定义为DateTime @db.Date，需确保前端传入的日期字符串能被new Date()正确解析，建议统一使用yyyy-MM-dd格式的日期字符串，这是最通用的兼容格式。

额外检查点 #

• 确认API路由文件路径正确：Next.js 13 App Router的API路由必须放在app/api/[route-name]/route.js（或.ts）路径下，否则请求无法匹配到处理函数。
• 前端fetch请求已正确设置Content-Type: application/json，当前代码已满足该要求。

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