Firebase Firestore纯JS调用update()触发列表项重复刷新后消失问题

• Firestore 实时快照监听器onSnapshot捕获到数据变更时，你的逻辑对added（新增）和modified（修改）类型的变更统一走了新建<li>插入列表的逻辑，每次修改数据都会额外新增一条重复条目，而非更新原有条目的内容，就出现了重复项。

修改onSnapshot部分的代码，区分处理新增和修改场景即可：

// Realtime listener
db.collection(collectionVal).onSnapshot(snapshot => {
    console.log('ran the listener');
    let changes = snapshot.docChanges();
    changes.forEach(change => {
        if (change.type == 'added'){
            // 仅新增数据时调用渲染函数创建新li
            renderItems(change.doc);
        } else if (change.type == 'modified'){
            // 修改数据时找到已有li，仅更新对应字段内容
            const existLi = itemList.querySelector(`[data-id=${change.doc.id}]`);
            existLi.querySelector('span:nth-child(2)').textContent = change.doc.data().replenish;
        } else if (change.type == 'removed'){
            const li = itemList.querySelector(`[data-id=${change.doc.id}]`);
            itemList.removeChild(li);
        }
    })
})

你当前表单提交的replenish值是字符串类型，后续取反操作可能出现逻辑异常（比如字符串"false"取反得到的是布尔值true），建议提交时统一转换为布尔值：

// Saving Data
form.addEventListener('submit',(e) => {
    e.preventDefault();
    db.collection(collectionVal).add({
        item: form.item.value,
        // 转换为布尔值，输入true/yes/1统一识别为真，其余输入识别为假
        replenish: ['true', 'yes', '1'].includes(form.replenish.value.toLowerCase())
    })
    form.item.value = '';
    form.replenish.value = '';
})

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