Firebase实时数据库点赞更新函数递归执行问题求助

问题描述 #

开发支持用户上传迷因的网站时，实现点赞更新功能遇到异常：点击点赞按钮后，like函数会无限递归执行，Firebase实时数据库中的likes数组持续重复添加用户对象。

相关代码 #

JavaScript代码 #

function like(id) {

  firebase.database().ref("memes/" + id).on("value", (snap) => {

    const cs = snap.val().likes || [{
      name: ""
    }]

    let res = [...cs, JSON.parse(localStorage.getItem("user"))].filter(item => item)

    console.log(res)

    firebase.database().ref("memes/" + id).update({
      likes: res,
    });
  })
}

HTML代码 #

<p><button onclick="like('${y.name}/${y.head}')"><ion-icon name="thumbs-up"></ion-icon></button><b>${1 || y.likes.length }</b></p>

问题原因 #

代码中使用on("value")持续监听数据库数据变化，每次调用update修改likes数组后，数据库更新会触发监听回调，回调里再次执行update，形成无限递归循环，导致数组被反复追加内容。

解决方案 #

1. 替换监听方式为一次性读取 #

将on("value")改为once("value")，仅读取一次数据，不持续监听变化，从根源避免递归触发：

function like(id) {
  firebase.database().ref("memes/" + id).once("value", (snap) => {
    // 用空数组替代默认空对象，逻辑更合理
    const cs = snap.val().likes || [];
    const currentUser = JSON.parse(localStorage.getItem("user"));

    // 新增判断：检查用户是否已点赞，避免重复添加
    const hasLiked = cs.some(item => item.name === currentUser.name);
    if (hasLiked) return;

    const res = [...cs, currentUser].filter(item => item);
    firebase.database().ref("memes/" + id).update({ likes: res });
  });
}

2. 修正点赞数显示逻辑 #

原HTML中点赞数的判断逻辑错误，调整为显示实际点赞数量，无点赞时显示0：

<p><button onclick="like('${y.name}/${y.head}')"><ion-icon name="thumbs-up"></ion-icon></button><b>${y.likes ? y.likes.length : 0}</b></p>

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