无法传递ID至后端，调用findByIdAndRemove()删除MongoDB项问题

问题场景 #

页面通过map()渲染MongoDB数据为卡片，每个卡片的删除按钮绑定数据项的item._id，点击后调用前端方法传递ID到后端接口，但后端始终无法获取到ID，req.body打印为undefined，无法执行findByIdAndRemove()完成删除。

前端代码 #

const deletehandler = async (id) => {
  console.log(typeof id, id) // 此处打印ID为string类型
  
  try {
     await axios.delete('/api/delete', id)
  } catch (error) {
    console.log(error)
  } 
}

return (
  // ...其他代码
  {getData.map(item => {
    return (
      <div key={item.name} className='card'>
        <span className='ps-2'>{item.name}</span>
        <RiDeleteBin5Line 
          style={{cursor: 'pointer'}}
          onClick={() => deletehandler(item._id)}
        />
      </div>
    )
  })}
)

后端接口代码 #

import { getSession } from 'next-auth/react';
import db from "@/utils/db";
import User from "@/modules/User";

const handler = async (req, res) => {
  console.log(req.body) // 打印结果为undefined 

  await db.connect();
  await User.findByIdAndRemove(id) // 此处id未定义
  await db.disconnect(); 
  res.status(200).json({ message: 'success '})
};

export default handler

核心问题分析 #

1. Axios Delete方法参数错误：axios.delete()的第二个参数是配置对象，不是直接传递数据。直接传id，Axios不会把它放到请求体里，导致后端拿不到数据。
2. 后端未正确获取参数且变量未定义：当前后端代码里的id变量完全没定义，直接调用findByIdAndRemove(id)会报错；同时req.body为undefined，因为Delete请求默认不携带请求体，或者前端未按正确格式传递。

解决方案 #

推荐两种实现方式，优先选URL参数传递（符合RESTful规范）：

方式一：通过URL参数传递ID（推荐） #

前端修改：

把ID拼接到请求URL中：

const deletehandler = async (id) => {
  console.log(typeof id, id)
  
  try {
     await axios.delete(`/api/delete/${id}`) // 把ID放到URL路径里
  } catch (error) {
    console.log(error)
  } 
}

后端修改：

从req.query.id获取ID，同时补充变量定义与异常处理：

const handler = async (req, res) => {
  const { id } = req.query; // 从URL参数获取ID

  if (!id) {
    return res.status(400).json({ message: '缺少ID参数' });
  }

  try {
    await db.connect();
    await User.findByIdAndRemove(id);
    await db.disconnect(); 
    res.status(200).json({ message: '删除成功' });
  } catch (err) {
    await db.disconnect();
    res.status(500).json({ message: '删除失败', error: err.message });
  }
};

方式二：通过请求体传递ID（不推荐，不符合RESTful规范） #

如果坚持用请求体传递，需要修改Axios的调用方式：

前端修改：

把ID放到配置对象的data字段中：

const deletehandler = async (id) => {
  console.log(typeof id, id)
  
  try {
     await axios.delete('/api/delete', { 
       data: { id } // 把ID放到请求体里
     })
  } catch (error) {
    console.log(error)
  } 
}

后端修改：

从req.body获取ID，并处理异常：

const handler = async (req, res) => {
  const { id } = req.body; // 从请求体获取ID

  if (!id) {
    return res.status(400).json({ message: '缺少ID参数' });
  }

  try {
    await db.connect();
    await User.findByIdAndRemove(id);
    await db.disconnect(); 
    res.status(200).json({ message: '删除成功' });
  } catch (err) {
    await db.disconnect();
    res.status(500).json({ message: '删除失败', error: err.message });
  }
};

额外注意点 #

• 后端必须先验证ID是否存在，避免空值传入导致报错；
• 增加try/catch捕获数据库操作异常，返回友好的错误信息；
• 前端点击删除按钮时可以增加确认提示，防止误操作。

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