如何在Firebase Realtime Database删除指定数据？dbRef.remove()报错非函数

错误原因 #

你使用的是Firebase 模块化SDK（v9及以上版本），这个版本的API采用函数式调用方式，ref()仅用于创建数据库引用对象，删除操作需要通过单独的remove()函数来执行，而非调用引用对象的.remove()方法（这是旧版命名空间SDK的写法）。

修正步骤 #

1. 导入remove函数
   确保你已经从Firebase数据库模块中导入remove：

   import { ref, remove } from "firebase/database";
   

2. 修改删除逻辑
   将代码中的dbRef.remove()替换为remove(dbRef)，同时移除alert("Data removed successfully")后面多余的单引号：

   修正后的完整代码：

   DeleteData1.addEventListener('click',(e)=>{
       e.preventDefault(); // 可选：如果按钮在表单内，阻止默认提交行为避免页面刷新
       
       var deleteCrop1 = document.getElementById('deleteCrop').value;
       const dbRef = ref(database, 'Crops/' + deleteCrop1);
   
       if(deleteCrop1 === ''){ // 复用已获取的变量，简化代码
           alert("Fields cannot be empty");
       } else {
           remove(dbRef)
               .then(() => {
                   alert("Data removed successfully");
               })
               .catch((error) => {
                   alert("Failed to remove data: " + error.message);
               });
       }
   });
   

额外优化建议 #

• 直接复用已获取的deleteCrop1变量判断空值，避免重复调用getElementById
• 为remove()添加then/catch处理异步操作的成功和失败场景，避免删除未完成就提示成功
• 如果按钮在表单内，添加e.preventDefault()防止页面意外刷新

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