如何按键删除Firebase Realtime Database子节点（附代码报错排查）

你的代码调用方式不匹配当前使用的Firebase SDK版本：
db.ref()是v8及更早版本的命名空间式SDK写法，如果你使用的是v9+ 模块化SDK（当前默认安装的版本），数据库实例上不存在ref方法，会直接抛出「不是函数」的运行时错误，和你传入的e.target.id取值是否正确无关。

v9+ 模块化SDK需要单独引入路径操作、数据删除的对应方法，修正后的完整代码如下：

// 文件顶部引入依赖，和你现有引入firebase/database的路径保持一致
import { getDatabase, ref, remove } from "firebase/database";

confirmDelete(e) {
  const db = getDatabase();
  // 调用独立的ref方法生成目标节点引用
  const targetShipRef = ref(db, `/ships/${e.target.id}`);
  // 调用remove方法执行删除
  remove(targetShipRef)
    .then(() => {
      // 删除成功后的回调逻辑，比如刷新列表、提示成功
      console.log("船舶节点删除成功");
    })
    .catch((error) => {
      // 捕获删除过程中的错误，方便排查
      console.error("删除操作失败：", error);
    });
},

如果改完写法还是报错，逐一核对以下项：

• 确认Firebase App初始化逻辑在调用getDatabase()之前已经执行完成，多实例场景下需要给getDatabase()传入对应初始化好的app实例
• 检查数据库安全规则，确认当前登录用户拥有/ships/路径下对应节点的删除权限，权限不足会导致remove操作被拒绝
• 如果删除按钮内部嵌套了其他子元素，建议增加事件目标判断，避免事件冒泡导致拿到的e.target不是绑定了id的按钮元素（你已经打印id和shipKey一致的话可跳过这步）

如果你想暂时沿用旧版db.ref().remove()的写法，可以引入带compat后缀的兼容版SDK，但官方不推荐长期使用兼容层，后续版本会逐步移除兼容相关代码，建议优先使用模块化写法。

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