Firebase抛出Reference.child失败错误，点击编辑删除按钮无响应如何解决

问题原因 #

你遇到的报错是调用empRef.child(emp_id)时，传入的emp_id值为undefined，不符合Firebase Realtime Database的路径参数要求，导致代码中断执行，所以按钮点击无响应。

解决步骤 #

• 第一步：先在编辑按钮点击逻辑中增加参数校验，避免直接报错，同时定位问题
  修改你的编辑逻辑代码如下：

$(document).on('click', '.editEmp', function () {
    var emp_id = $(this).attr('data-emp-id');
    // 新增校验逻辑
    if (!emp_id) {
      console.error('当前编辑按钮未绑定员工ID，请检查列表渲染代码');
      return;
    }
    // 原有后续逻辑不变
    empRef.child(emp_id).once('value').then(function (emp){
        // ... 原有代码保持不变
    })
});

• 第二步：检查你的员工列表渲染代码，确保每个编辑、删除按钮都正确绑定了data-emp-id属性，属性值为对应员工在Firebase中的记录key
  你渲染员工列表的逻辑可以参考如下写法：

// 读取员工列表渲染到表格的示例代码
empRef.on('value', snapshot => {
  let tableHtml = '';
  snapshot.forEach(childSnapshot => {
    const empInfo = childSnapshot.val();
    const empId = childSnapshot.key; // 这个是Firebase生成的记录唯一key，必须绑定到按钮上
    tableHtml += `
    <tr>
      <td>${empInfo.name}</td>
      <td>${empInfo.email}</td>
      <td>
        <button class="editEmp" data-emp-id="${empId}">编辑</button>
        <button class="deleteEmp" data-emp-id="${empId}">删除</button>
      </td>
    </tr>`
  })
  $('#emp-table tbody').html(tableHtml);
})

• 第三步：优化data属性的读取写法，jQuery 1.4.3及以上版本推荐用data()方法读取自定义data属性，避免属性名大小写等问题：

// 替换原来的attr写法
var emp_id = $(this).data('emp-id');

删除按钮的问题和编辑按钮完全一致，按照以上方法排查即可。

内容的提问来源于stack exchange，提问作者nalini ranjan muduli