使用React+Next+Prisma提交评论表单时出现500错误求助

问题场景 #

提交博客评论表单时，调用后端接口返回500错误，已尝试调整请求路由、检查postId传递，但问题仍未解决。以下是前后端核心代码：

前端请求代码 #

async function submitData(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();

    const body = {
      authorEmail,
      content,
    };

    try {
      const response = await fetch(`/api/comment?id=${postId}`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(body),
      });

      if (response.ok) {
        const createdComment = await response.json();
        console.log('Comment created:', createdComment);
      } else {
        const errorData = await response.json();
        console.error('Error creating comment:', errorData);
      }
    } catch (error) {
      console.error('Error:', error);
    }
  }

后端处理代码 #

export const createComment = async (
    { body, query }: NextApiRequest,
    res: NextApiResponse,
) => {
    // Verificate the params
    if (!query.id) return res.status(400).json({ error: 'Missing id' })
    if (!body.authorEmail || !body.content) return res.status(400).json({ error: 'Missing fields' })

    // Convert the id to an integar
    const postId = +query.id

    // search the article with the post id
    const verifiedId = await prisma.post.findUnique({
        where: { id: postId },
    })
    if (!verifiedId) return res.status(400).json({ error: 'Post not found' })

    //fetch the datas comment from the request body
    const { authorEmail, content }: { authorEmail: string, content: string } = body

    //search the author
    const author = await prisma.user.findUnique({
        where: { email: authorEmail },
    })
    if (!author) return res.status(400).json({ error: 'Author not found' })

    // Create the comment in the db
    const comment = await prisma.comment.create({
        data: {
            userId: author.id,
            postId,
            content,
        },
    })

    return res.status(200).json(comment)
}

核心问题分析 #

500错误通常是后端未捕获的异常导致，你的代码存在以下几个高风险点：

1. Prisma操作无异常捕获
   后端所有数据库查询（findUnique、create）都没有包裹try/catch，一旦出现数据库连接失败、外键约束冲突、字段类型不匹配等问题，会直接抛出未处理异常，触发500错误。

2. postId类型转换未校验
   const postId = +query.id仅做了类型转换，但未校验转换结果是否有效。如果query.id是无效数字字符串（如空值、字母），转换后会得到NaN，后续数据库操作会因参数非法报错。

3. 潜在的竞态条件
   即使prisma.post.findUnique查到了post，但在执行comment.create前，该post可能被删除，导致外键约束失败。

修复方案 #

1. 给后端添加全局异常捕获 #

修改后端代码，将所有逻辑包裹在try/catch中，捕获并返回具体错误信息：

export const createComment = async (
    { body, query }: NextApiRequest,
    res: NextApiResponse,
) => {
    try {
        // Verificate the params
        if (!query.id) return res.status(400).json({ error: 'Missing id' })
        if (!body.authorEmail || !body.content) return res.status(400).json({ error: 'Missing fields' })

        // Convert the id to an integer and check validity
        const postId = +query.id
        if (isNaN(postId)) {
            return res.status(400).json({ error: 'Invalid postId format' })
        }

        // search the article with the post id
        const verifiedId = await prisma.post.findUnique({
            where: { id: postId },
        })
        if (!verifiedId) return res.status(400).json({ error: 'Post not found' })

        // fetch the datas comment from the request body
        const { authorEmail, content }: { authorEmail: string, content: string } = body

        // search the author
        const author = await prisma.user.findUnique({
            where: { email: authorEmail },
        })
        if (!author) return res.status(400).json({ error: 'Author not found' })

        // Create the comment in the db
        const comment = await prisma.comment.create({
            data: {
                userId: author.id,
                postId,
                content,
            },
        })

        return res.status(200).json(comment)
    } catch (error) {
        console.error('Comment creation failed:', error)
        return res.status(500).json({ 
            error: 'Internal server error', 
            details: error instanceof Error ? error.message : 'Unknown error' 
        })
    }
}

2. 前端验证postId有效性 #

在发送请求前，先检查postId是否为有效数字：

async function submitData(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();

    // 验证postId
    if (!postId || isNaN(+postId)) {
        console.error('Invalid postId:', postId)
        alert('请选择有效的文章')
        return
    }

    const body = {
      authorEmail,
      content,
    };

    try {
      const response = await fetch(`/api/comment?id=${postId}`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(body),
      });

      if (response.ok) {
        const createdComment = await response.json();
        console.log('Comment created:', createdComment);
      } else {
        const errorData = await response.json();
        console.error('Error creating comment:', errorData);
      }
    } catch (error) {
      console.error('Error:', error);
    }
  }

3. 检查Prisma模型约束 #

确认schema.prisma中Comment模型的外键定义与User、Post模型一致：

model Comment {
  id        Int      @id @default(autoincrement())
  content   String
  userId    Int
  postId    Int
  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
  post      Post     @relation(fields: [postId], references: [id], onDelete: Cascade)
  createdAt DateTime @default(now())
}

确保userId、postId的类型与User、Post的id类型完全匹配（均为Int或均为String）。

排查步骤 #

1. 启动后端服务，查看控制台日志，异常捕获后会打印具体错误原因
2. 前端控制台查看postId的实际值，确认是否为有效数字
3. 检查数据库中对应的post和user是否存在，避免外键约束冲突

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