Firebase提交评论后列表无限重复添加的问题排查

核心问题 #

你把添加评论并更新Firebase文档的逻辑写在了onSnapshot的回调函数里，而onSnapshot是实时监听文档变化的触发器——每次调用setDoc更新文档后，文档发生变化会再次触发onSnapshot回调，重复执行添加评论、更新文档的操作，形成无限循环。

另外代码里还有个错误：newComment.Body使用的comment.value是无效的，这里的comment是Firebase文档引用对象，并没有value属性，应该从表单输入框获取实际输入内容。

修复后的代码 #

1. 分离监听与提交逻辑

把实时监听文档的逻辑和添加评论的逻辑分开：onSnapshot仅用于获取最新评论数据做渲染，添加评论的逻辑放在表单的提交处理函数中。

// 定义文档引用
const commentDocRef = doc(db, "Comments", "8-21-2022");

// 仅用onSnapshot实时获取评论数据，用于页面渲染
onSnapshot(commentDocRef, (doc) => {
  if (doc.exists()) {
    const allComments = doc.data().Comments;
    // 这里执行渲染逻辑，比如更新组件状态展示评论列表
    // 示例：setComments(allComments); // React环境下的状态更新
  }
});

// 表单提交处理函数
const handleSubmit = (e) => {
  e.preventDefault();
  
  // 获取输入框的评论内容
  const commentInput = document.getElementById('comment');
  const commentContent = commentInput.value.trim();
  
  // 空内容不提交
  if (!commentContent) return;

  // 获取当前最新评论列表，然后添加新评论
  getDoc(commentDocRef).then((doc) => {
    let allComments = [];
    if (doc.exists()) {
      allComments = doc.data().Comments || [];
    }
    
    // 创建新评论对象
    const newComment = {
      Body: commentContent,
      Replies: [],
      Upvotes: 0
    };
    
    allComments.push(newComment);
    
    // 更新Firebase文档，用merge: true避免覆盖其他可能存在的字段
    return setDoc(commentDocRef, { Comments: allComments }, { merge: true });
  }).then(() => {
    // 提交成功后清空输入框
    commentInput.value = '';
  }).catch((error) => {
    console.error('添加评论失败:', error);
  });
};

2. 表单组件（确保绑定提交函数）

<form onSubmit={handleSubmit}>
    <input type="text" id="comment"/>
    <input type="submit" value="submit" />
</form>

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