Firebase调用remove()时触发Cannot read property 'titulo' of null错误

首先，咱们来拆解你遇到的问题：

你看到的TypeError: Cannot read property 'titulo' of null报错，其实和remove()本身无关——Firebase确实成功删除了节点，但你的代码里有一个持续监听该节点变化的回调（就是initFirebase里的on('value')），当节点被删除后，这个回调会被触发，此时data.val()返回的是null，而你直接用documento.titulo去访问它的属性，自然就会抛出错误。

第一步：修复报错问题 #

只需要在监听回调里先判断节点是否存在，再去访问属性即可，修改initFirebase函数：

function initFirebase(){
  documentosCatRef.child(keyCategoria).child('subcategorias').child(keySubCategoria).child('documentos').child(keyDocumento).on('value', function(data) {
    documento = data.val();
    // 先判断documento是否存在，再操作DOM
    if (documento) {
      $('#nomeDoc').text(documento.titulo);
      $('#titulo').val(documento.titulo);
      $('#data_inicio').val(documento.data_inicio);
      $('#data_realizacao').val(documento.data_realizacao);
      $('#data_fim').val(documento.data_fim);
    } else {
      // 节点被删除后，可以清空表单或者做其他提示处理
      $('#nomeDoc').text('');
      $('#titulo').val('');
      $('#data_inicio').val('');
      $('#data_realizacao').val('');
      $('#data_fim').val('');
    }
  })
}

这样修改后，即使节点被删除，回调也不会因为访问null的属性而报错了。

第二步：用update()或set()删除节点的方法 #

当然可以用这两个方法替代remove()，效果完全一致：

1. 使用set(null)
   直接对目标节点调用set(null)，等同于remove()：

documentosCatRef.child('estacionamento').child('categorias').child(keyCategoria).child('subcategorias').child(keySubCategoria).child('documentos').child(keyDocumento).set(null);

2. 使用update()
   如果需要在一次操作中同时更新其他节点并删除目标节点，可以在update的参数对象里，把目标节点的路径设为null：

// 示例：同时删除目标节点，更新某个其他节点的值
documentosCatRef.child('estacionamento').child('categorias').child(keyCategoria).update({
  'subcategorias/' + keySubCategoria + '/documentos/' + keyDocumento: null,
  'outro_campo': 'novo_valor' // 可选，其他需要更新的内容
});

总结 #

报错的核心原因是监听回调没有处理节点被删除后的null值，修复这个判断就能解决日志报错的问题。而用set(null)或update()的方式删除节点，和remove()的功能是完全等价的，你可以根据场景选择使用。

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