未刷新页面时Mongoose删除新增对象报Cast to ObjectId错误

报错本质是删除接口收到的id参数是字符串"undefined"，Mongoose无法将其转换为MongoDB要求的ObjectId类型，因此抛出转换失败错误。
新旧条目删除表现不一致的原因非常明确：

• 页面刷新后，列表数据从后端GET接口拉取，所有人员条目经过你在schema中配置的toJSON方法处理，都带有格式化后的id字段，删除按钮绑定的id值合法，请求可正常执行。
• 新增人员后不刷新页面时，前端本地列表中新追加的条目没有合法的id属性：要么是前端新增提交后，直接把本地临时构造的、无id的人员对象塞进了列表；要么是后端POST新增接口返回的新建人员数据没有经过toJSON转换，只带原始的_id字段、没有对外暴露的id字段，前端读取person.id时拿到undefined，最终拼接出的删除请求地址为/api/persons/undefined，后端拿到的参数自然是非法值。

后端侧修复 #

1. 修正新增接口的返回逻辑，确保返回的新建人员数据经过toJSON处理，携带正确的id字段：

app.post("/api/persons", (req, res, next) => {
  const newPerson = new Person({
    name: req.body.name,
    number: req.body.number
  })

  newPerson.save()
    .then(savedDoc => {
      // 手动调用toJSON触发字段转换，返回带id的标准格式
      res.status(201).json(savedDoc.toJSON())
    })
    .catch(err => next(err))
})

2. 给删除接口增加id合法性前置校验，提前拦截非法请求，避免无意义的数据库查询报错：

const mongoose = require('mongoose')

app.delete("/api/persons/:id", (req, res, next) => {
  // 先校验id是否符合ObjectId格式
  if (!mongoose.isValidObjectId(req.params.id)) {
    return res.status(400).json({ error: "非法的人员id" })
  }

  Person.findByIdAndDelete(req.params.id)
    .then(() => {
      res.status(204).end()
    })
    .catch(error => next(error))
});

前端侧修复 #

• 新增人员的请求成功后，必须使用后端返回的、带合法id的人员对象追加到本地列表，不要直接使用提交时本地临时构造的无id对象。
• 若你使用的请求库默认返回完整响应对象（比如axios），注意取response.data拿到实际的人员数据，不要直接把整个响应对象存入列表。
• 绑定删除事件时，确认读取的是条目上的id字段，不要误读_id或其他不存在的字段。

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