Vue3+Firebase9下无法通过ID删除Firestore产品文档的问题

代码中存在4处会导致删除功能异常的问题，逐一修正即可正常运行：

• 删除方法逻辑错误：deleteProduct的形参名doc和Firebase导入的doc函数重名，会触发作用域冲突；方法内使用了未定义的变量docRef.id，直接抛出JS运行时错误。另外你已经在main.js中把dataBase定义为products集合的引用，生成待删除文档路径时不需要重复传入"products"参数。
• 语法错误：data()返回的product对象里，name: ''后多了一个冗余逗号，JS严格模式下会直接阻断代码运行。
• 实时监听逻辑漏洞：onSnapshot会在集合数据发生任何变动（新增/删除/修改）时触发，原代码每次触发都直接往products数组push数据，没有清空旧值，会导致列表重复渲染，删除后视觉上会出现数据未消失的假象。
• 新增逻辑异常捕获失效：原saveData中addDoc是异步Promise操作，没有加await的情况下，外层try/catch无法捕获写入失败的错误。

修正后的products.js代码 #

import { dataBase } from '../main';
import { addDoc, deleteDoc, onSnapshot, doc } from "firebase/firestore";

export default {
  name: "Products",
  props: {
    msg: String
  },
  data() {
    return {
      products: [],
      product: {
        name: '',
        price: '',
        brand: '',
        category: ''
      }
    }
  },
  methods: {
    async saveData() {
      try {
        const docRef = await addDoc(dataBase, this.product);
        console.log("文档写入成功，ID：", docRef.id);
        // 新增完成后可按需清空表单
        this.product = { name: '', price: '', brand: '', category: '' }
      } catch (e) {
        console.error("文档写入失败：", e);
      }
    },
    deleteProduct(productId) {
      if (confirm('确定删除该产品？')) {
        // 基于已有集合引用+文档ID生成待删除文档引用
        deleteDoc(doc(dataBase, productId))
          .then(() => console.log("删除成功"))
          .catch(err => console.error("删除失败：", err))
      }
    }
  },
  created() {
    onSnapshot(dataBase, (snapshot) => {
      // 每次快照更新前先清空旧数组，避免数据重复
      this.products = [];
      snapshot.docs.forEach((docItem) => {
        this.products.push({ ...docItem.data(), id: docItem.id })
      })
    });
  }
};

main.js中定义的集合引用不需要改动，保持原有代码即可。

模板调用要求 #

遍历产品列表绑定删除事件时，需要将当前产品的ID作为参数传入删除方法，示例写法：

<div v-for="product in products" :key="product.id">
  <span>{{ product.name }} | ￥{{ product.price }}</span>
  <button @click="deleteProduct(product.id)">删除产品</button>
</div>

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