React调用API从Prisma获取数据报500未处理错误如何解决？

问题原因排查 #

• 1. Prisma 方法调用语法错误
     Prisma 的 findUnique/deleteUnique 方法不支持直接传入 id 值，必须传入包含 where 筛选条件的配置对象，同时你漏写了操作的表模型名，错误写法会直接触发 Prisma 调用异常，导致接口返回500状态码。
• 2. API 接口变量作用域错误
     你仅在 DELETE 分支中解构了 req.query.id，GET 分支中直接使用的 id 属于未定义变量，会触发服务端运行时错误。
• 3. 前端请求缺少错误捕获
     getIssue 是异步函数，你没有添加 try/catch 捕获请求异常，接口报错时就会抛出未处理的运行时错误，也就是你现在看到的 axios 报错栈。
• 4. 动态路由参数未做可用性判断
     Next.js 客户端的 router.query 在页面首次 hydration 完成前是空对象，此时 id 为 undefined，如果用户在参数还没加载完成时点击按钮，会请求到非法路径 /api/issues/undefined，触发404/500错误。

修复代码 #

1. API 接口修正 #

export default async function handler(req, res) {
  // 把id解构提到外层，所有分支都可用
  const { id } = req.query
  // 增加参数校验，没有id直接返回400
  if (!id) return res.status(400).json({ success: false, msg: '缺少id参数' })
  
  switch (req.method) {
    case 'DELETE':
      // 补充模型名（此处假设你的表名为issue，可替换为实际表名）+ 正确的Prisma调用语法
      // 如果你的id是字符串类型（如uuid、cuid）可去掉Number()转换
      const issue2 = await db.issue.deleteUnique({
        where: { id: Number(id) }
      })
      res.status(204).end()
      break
      
    case 'GET':
      const issue = await db.issue.findUnique({
        where: { id: Number(id) }
      })
      // 找不到对应记录返回404
      if (!issue) return res.status(404).json({ success: false, msg: '记录不存在' })
      res.status(200).json({ success: true, data: issue })
      break
    default:
      res.setHeader('Allow', ['GET', 'DELETE'])
      res.status(405).end(`Method ${req.method} Not Allowed`)
      break
  }
}

2. 前端代码修正 #

import axios from 'axios'
import { useRouter } from 'next/router'

const Issue = () => {
  const router = useRouter();
  const { id } = router.query

  const getIssue = async () => {
    // 先判断id是否存在再发起请求
    if (!id) return
    try {
      const response = await axios.get(`/api/issues/${id}`)
      // 此处补充你的业务逻辑，比如把数据存到状态里
      console.log('请求成功', response.data)
    } catch (err) {
      // 错误捕获处理，避免抛出未处理异常
      console.error('请求失败', err.response?.data || err.message)
    }
  }

  return (
    <div>
      <h1>Issue {id}</h1>
      {/* id没加载完成时禁用按钮，避免无效点击 */}
      <button onClick={getIssue} disabled={!id}>Hent Id</button>
    </div>
  )
}

export default Issue

调试建议 #

如果修改后还有问题，可以先在浏览器控制台的「网络」标签页查看对应API请求的响应状态码和返回内容，就能快速定位是参数问题还是服务端逻辑问题。

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