Firebase搭建评论系统刷新页面后评论消失问题排查求助

你的代码存在三个核心逻辑错误，直接导致刷新后评论消失，且无法正常存储多条评论：

• 数据写入使用了set()方法，该方法会直接覆盖指定路径下的所有原有数据，每次提交新评论都会删除之前存储的所有旧评论，数据库里永远只会保留最后一次提交的单条评论
• 评论拉取、DOM渲染的逻辑仅绑定在提交按钮的点击事件回调中，页面首次加载、手动刷新时不会触发这段逻辑，自然不会把数据库中已存储的评论渲染到页面上
• 异步逻辑顺序混乱：调用postNewComment()发起写入请求后，没有等待写入操作执行完成就立刻发起读取请求，大概率会读到写入前的旧数据；同时现有读取逻辑默认comments/节点下只有单条评论，后续存储多条评论时无法正常遍历渲染。

小提示：你贴出的初始化代码第一行注释只写了单个/，记得补成// Initialize Firebase，否则会触发JS语法错误。

1. 修正写入逻辑，改用追加写入方式 #

把覆盖写入的set()替换为Firebase提供的push()方法，该方法会自动为每条评论生成唯一的子节点key，不会覆盖原有评论数据，同时返回Promise供后续逻辑等待写入完成：

const postNewComment = function () {
    // 追加写入新评论，不覆盖旧数据
    return push(ref(db, 'comments/'), {
        Name: name.value.trim(),
        Header: head.value.trim(),
        Message: message.value.trim()
    });
};

2. 抽离独立的评论渲染函数 #

把原来写在点击回调里的拉取、渲染逻辑抽成独立函数，增加遍历所有评论的逻辑，同时在渲染前清空评论区避免重复渲染：

// 创建HTML元素的工具函数保持不变
function elementFromHtml(html) {
    const templat = document.createElement('template');
    templat.innerHTML = html.trim();
    return templat.content.firstElementChild;
}

async function renderComments() {
    const sectionComments = document.querySelector('.scroll');
    // 清空评论区现有内容，避免重复渲染
    sectionComments.innerHTML = '';
    const dbref = ref(db);

    try {
        const snapshot = await get(child(dbref, 'comments/'));
        if (snapshot.exists()) {
            const allComments = snapshot.val();
            // 遍历所有评论条目逐一渲染
            Object.values(allComments).forEach(commentData => {
                const html = `
                <div class="row">
                    <div class="comments">
                    <figure class="comments__shape bg-color">
                        <img
                        src=""
                        alt=""
                        class="comments__image"
                        />
                        <figcaption class="comments__caption">${commentData.Name}</figcaption>
                    </figure>
                    <div class="comments__text">
                        <h3 class="heading-tertiary u-margin-bottom-small f-title">
                        ${commentData.Header}
                        </h3>
                        <p class="comments__story">
                        ${commentData.Message}
                        </p>
                    </div>
                    </div>
                </div>
                `;
                sectionComments.appendChild(elementFromHtml(html));
            })
        }
    } catch (error) {
        console.log('评论拉取失败，错误：' + error);
    }
}

3. 修正提交事件逻辑，增加页面加载时的渲染触发 #

调整提交按钮的回调逻辑，等待评论写入成功后再重新拉取渲染，同时在页面DOM加载完成后自动执行一次评论渲染，解决刷新后评论不显示的问题：

const postBtn = document.querySelector('.btn--post');

const postComment = async function (e) {
    e.preventDefault();
    // 等待评论写入数据库完成
    await postNewComment();
    // 重新拉取全量评论渲染
    await renderComments();
    // 重置表单字段
    document.querySelector('.form').reset();
};

postBtn.addEventListener('click', postComment);
// 核心：页面首次加载/刷新完成后，自动拉取评论渲染
window.addEventListener('DOMContentLoaded', renderComments);

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