Firestore删除元素后filter失效无法重绘移除卡片如何解决

• Array.filter()是纯函数，不会修改原数组，只会返回过滤后的新数组。你的代码调用banks.filter()后没有接收返回值，过滤操作没有产生任何实际效果。
• 存储全量银行数据的banks数组定义在onSnapshot回调内部，每次快照触发都会被重置为空数组，根本无法持久维护完整的银行列表。
• 删除事件触发时，你错误地把待删除的银行对象传给了generateBanks，反而会让被删的卡片重新渲染；同时没有传入过滤后的完整列表，页面自然无法正确移除对应卡片。
• 缺失modified类型变更的处理逻辑，后续银行数据修改时页面会出现不同步问题。

1. 将全量银行列表banks移到onSnapshot回调的外层作用域，持久存储全量数据，避免每次快照触发被重置
2. 处理removed事件时，接收filter返回的新数组并赋值覆盖原banks变量
3. 所有增量变更处理完成后，用最新的全量banks列表触发页面重绘，不要传入单个待删除条目
4. 补充modified事件的处理逻辑，覆盖数据更新场景

修复后可直接运行的代码：

// 全量数据存在回调外层，持久维护状态
let banks = [];
function getBanks() {
  db.collection("banks").onSnapshot((snapshot) => {
    snapshot.docChanges().forEach((change) => {
      const bank = {
        id: change.doc.id,
        ...change.doc.data(),
      };
      if (change.type === "added") {
        // 新增时做去重判断，避免重复添加
        const existIndex = banks.findIndex(item => item.id === bank.id);
        if (existIndex === -1) {
          banks.push(bank);
        }
      } else if (change.type === "removed") {
        // 接收filter返回的过滤后新数组，覆盖原变量
        banks = banks.filter((item) => item.id !== bank.id);
      } else if (change.type === "modified") {
        // 处理数据修改场景，更新对应条目
        const modifyIndex = banks.findIndex(item => item.id === bank.id);
        if (modifyIndex !== -1) {
          banks[modifyIndex] = bank;
        }
      }
    });
    // 所有变更处理完成后，用最新全量数据重绘页面
    generateBanks(banks);
  });
}

补充说明：如果你的generateBanks是追加渲染逻辑而非全量替换逻辑，需要在函数开头先清空卡片容器（比如执行container.innerHTML = ''），再遍历传入的列表生成卡片，否则会出现重复渲染的问题。

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