删除Firebase关联用户UID的嵌套对象时出现reading 'id' undefined报错如何解决

根因说明 #

共3个核心问题导致报错：

• v-for的key使用了整个gig对象，导致Vue列表项识别异常，触发deleteGigs时传入的gig不是预期对象，读取id时报undefined
• 删除操作的Firebase路径缺失用户UID层级，匹配不到要删除的记录
• 登录态回调中未存储当前用户信息，无法获取用户UID拼接删除路径

分步修改方案 #

1. 修正模板v-for的key属性 #

把原模板中v-for对应的行替换为以下代码：

<div
  class="Amodule  back"
  v-for="gig in allGigs"
  :key="gig.id"
>

2. 修正created钩子，存储当前登录用户信息 #

在onAuthStateChanged回调拿到有效用户时，先赋值给authUser，同时给child_removed事件加空值判断避免报错：

created: function() {
  firebase.auth().onAuthStateChanged(user => {
    if (user) {
      // 新增这行，存储当前登录用户信息
      this.authUser = user
      gigRef.child(user.uid).on('child_added', snapshot => {
          this.allGigs.push({...snapshot.val(), id: snapshot.key})
          if (snapshot.val().user !== this.authUser) {
              nativeToast({
                  message: `New message by ${snapshot.val().authUser}`,
                  type: 'success'
              })
          }
      })
      gigRef.child(user.uid).on('child_removed', snapshot => {
          const deleteGigs = this.allGigs.find(gig => gig.id === snapshot.key)
          // 新增空值判断，避免找不到对应记录时报错
          if (deleteGigs) {
            const index = this.allGigs.indexOf(deleteGigs)
            this.allGigs.splice(index, 1)
          }
          if (snapshot.val().user !== this.authUser) {
              nativeToast({
                  message: `Gig deleted by ${snapshot.val().authUser}`,
                  type: 'warning'
              })
          }
      })
    }
 })
}

3. 修正deleteGigs删除方法，补全Firebase路径 #

methods: {
  async deleteGigs(gig) {
    // 空值校验，避免非法调用报错
    if (!gig?.id || !this.authUser?.uid) return
    try {
      // 补全用户UID层级，路径匹配数据结构 gigs/用户UID/记录ID
      await gigRef.child(this.authUser.uid).child(gig.id).remove()
      console.log("删除成功，记录ID："+gig.id)
    } catch (err) {
      console.error("删除失败：", err)
    }
  }
}

额外检查项 #

新增数据逻辑中，确认存储节点和读取节点一致。如果你的gig数据是存在gigs节点下，新增代码中的messagesRef需要替换为gigRef，避免存错节点：

// 原代码
// messagesRef.child(this.newGig.userID).push(this.newGig);
// 修改为
gigRef.child(this.newGig.userID).push(this.newGig);

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