如何在Axios中传入变量并写入数据库？解决500报错

问题现象 #

• 使用硬编码参数向/api/Me发送POST请求时，能成功写入数据库
• 将参数替换为变量（如firstName: test或context.something）时，返回AxiosError: Request failed with status code 500

解决方案 #

1. 修复后端代码：添加错误捕获与参数校验 #

后端当前缺少错误处理机制，且导入了无用的React Hooks，修改如下：

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export default async function handler(req, res) {
  const { method } = req;

  switch (method) {
    case 'POST':
      try {
        const { firstName, id, lastName } = req.body;

        // 校验必填字段是否存在
        if (!firstName || !lastName) {
          return res.status(400).json({ error: 'firstName和lastName为必填项' });
        }

        const me = await prisma.me.create({
          data: {
            firstName,
            lastName,
            // 若不需要自定义ID，删除id字段，使用Prisma自动生成的cuid
            ...(id && { id })
          },
        });
        res.status(201).json(me);
      } catch (error) {
        console.error('数据创建失败:', error);
        res.status(500).json({ error: error.message });
      }
      break;
    default:
      res.setHeader('Allow', ['POST']);
      res.status(405).end(`Method ${method} Not Allowed`);
  }
}

说明：删除无用的React Hooks导入，添加try-catch捕获错误并返回具体信息，新增参数校验，同时支持可选传入自定义ID。

2. 前端确保变量有效性并添加错误捕获 #

确保传入的变量不为undefined或null，同时在请求中添加错误捕获：

const test = 'tsdf';
async function handleprisma() {
  // 替换为你的变量时，先确认值存在
  const firstName = test;
  const lastName = 'sdfsdfsdfsfd'; // 示例变量，实际替换为你的业务变量
  // const id = 'fudck'; // 非必要则删除，使用自动生成的ID

  // 校验参数有效性
  if (!firstName || !lastName) {
    console.log('必填参数不能为空');
    return;
  }

  try {
    const res = await axios.post('/api/Me', {
      firstName,
      lastName,
      // id, // 非必要则删除
    });
    console.log(res.data);
  } catch (error) {
    // 打印具体错误信息
    console.error('请求失败:', error.response?.data?.error || error.message);
  }
}

3. 遵循Prisma Schema规则 #

你的Schema中id字段配置了@id @default(cuid())，意味着：

• 若前端不传入id，Prisma会自动生成唯一的cuid
• 若手动传入id，必须保证该ID在数据库中未存在，否则会触发唯一约束错误
  建议优先使用自动生成的ID，避免手动传入导致冲突。

4. 重新生成Prisma Client（若Schema有修改） #

如果调整过Schema定义，运行以下命令更新客户端：

npx prisma generate
npx prisma migrate dev

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