Node.js+MongoDB处理EJS复选框状态时报读取undefined错误排查

• 核心触发点是浏览器表单的默认提交规则：只有处于选中状态的复选框，才会被包含在提交的请求体中。当点击已选中的复选框时，复选框会切换为未选中状态，此时表单提交的数据里不存在checkbox字段，后端拿到的req.body.checkbox为undefined。
• 后续代码用这个undefined值作为任务ID去MongoDB做$elemMatch匹配查询，无法找到对应的子任务文档，返回结果中的result.tasks是空数组，直接访问result.tasks[0]就会抛出TypeError: Cannot read properties of undefined (reading '0')错误。
• 点击未选中的复选框时，复选框切换为选中状态，提交时会正常携带checkbox字段的任务ID值，数据库查询能匹配到对应任务，因此功能表现正常。
• 另外前端EJS模板存在隐性bug：HTML复选框的checked是布尔属性，只要标签上存在该属性，无论属性值写什么（哪怕是"false"），浏览器都会将复选框渲染为选中状态。原有模板无论任务是否完成都给输入框加了checked属性，会导致状态渲染逻辑完全失效。

1. 修正EJS模板代码 #

删除冗余的重复if/else分支，正确渲染复选框选中状态，同时新增独立的隐藏域存储任务ID，不依赖复选框传递ID值（避免未选中时参数丢失），修正自闭合标签的错误写法：

<% taskList.forEach((task) => { %>
    <div class="task">
        <form class="task-content" action="/checked-box" method="post">
            <input 
                type="checkbox" 
                name="checkbox" 
                value="<%= task._id %>" 
                onchange="this.form.submit()"
                <% if (task.solvedOn) { %>checked<% } %>
            >  
            <p><%= task.name %></p>
            <input type="hidden" name="taskID" value="<%= task._id %>">
            <input type="hidden" name="taskListID" value="<%= list._id %>">
            <input type="hidden" name="taskListTitle" value="<%= list.title %>">
        </form>
    </div>
<% }); %>

2. 修正后端接口逻辑 #

从独立隐藏域获取任务ID，增加参数合法性校验、查询结果空判断，避免空指针报错；可以直接通过MongoDB语法对状态字段做取反更新，减少一次数据库查询，提升性能：

app.post('/checked-box', (req, res) => {
  // 从隐藏域获取参数，不依赖复选框提交值
  const taskID = req.body.taskID;
  const listTitle = req.body.taskListTitle;
  const listID = req.body.taskListID;

  // 参数合法性校验
  if (!taskID || !listID || !listTitle) {
    return res.status(400).redirect('/');
  }

  // 直接更新，对solvedOn字段做布尔取反，无需先查询再修改
  List.updateOne(
    {_id: listID, "tasks._id": taskID},
    [{$set: {"tasks.$.solvedOn": {$not: "$tasks.$.solvedOn"}}}],
    (err, result) => {
      if (err || result.matchedCount === 0) {
        console.log('操作失败:', err);
        return res.redirect('/');
      }
      res.redirect('/' + listTitle);
    }
  )
})

如果使用的MongoDB版本不支持聚合管道更新，可以保留原有先查后改的逻辑，但必须在查询后增加空判断：确认查询无错误、返回结果存在、匹配到的tasks数组长度大于0，再访问数组元素，避免空指针报错。

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