Vue项目中Firebase删除方法无法删除指定对象是什么原因？

你的删除操作路径和实际数据库存储路径不匹配：
从你读取数据的代码可以看出，gigs 节点下的层级是 gigs/[用户UID]/[gig记录ID]，你在处理读取结果时直接丢弃了上层的用户UID参数，删除时只拼了 gigs/[gig记录ID] 这个不存在的路径，因此删除操作不会生效。
你直接调用gigRef.remove()会删除整个gigs节点下的所有数据，也验证了根引用是正常的，问题仅出在路径拼接错误。

1. 调整数据读取逻辑，保留用户UID #

修改created钩子中处理snapshot的代码，把每个gig所属的用户UID也存入gig对象：

created: function() {
  firebase.auth().onAuthStateChanged(user => {
      if (user) {
        gigRef.once('value', snapshot => {
          const val = snapshot.val()
          if (val) {
            // 改用Object.entries获取用户UID
            this.allGigs = Object.entries(val).flatMap(([userId, userGigs]) =>
            Object.entries(userGigs).map(([ _key, gig ]) => ({ _key, userId, ...gig})))
          }
          console.log(snapshot.val())
        });
      }
   })
}

2. 修改删除按钮传参与删除逻辑 #

模板中点击事件改为传入整个gig对象：

<a @click.prevent="deleteGigs(gig)" class="card-link">
  <v-icon color=red>mdi-delete</v-icon>
</a>

调整deleteGigs方法，拼接正确的删除路径，可添加错误捕获排查权限等异常：

methods: {
  deleteGigs(gig) {
    // 拼接正确路径：gigs/用户UID/gig记录ID
    gigRef.child(gig.userId).child(gig._key).remove()
      .then(() => {
        console.log('删除成功')
        // 删除成功后可手动移除数组中的对应项，刷新页面显示
        this.allGigs = this.allGigs.filter(item => item._key !== gig._key)
      })
      .catch(err => console.error('删除失败：', err))
  }
}

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