Firebase删除文档时出现TypeError: doc is not a function错误求助

问题原因 #

变量名冲突导致作用域覆盖：

• renderCafe函数的参数命名为doc，在该函数内部的点击事件回调中，doc指向的是传入的Firestore文档对象，而非从Firebase Firestore SDK导入的doc构造函数，因此调用doc(db,"cafe",id)时触发"不是函数"的错误。

解决方案 #

方案1：修改函数参数名（推荐） #

将renderCafe的参数名改为不冲突的名称（比如cafeDoc），并同步修改内部所有对该参数的引用：

function renderCafe(cafeDoc){
    let li = document.createElement('li')
    let name = document.createElement('span')
    let city = document.createElement('span')
    let cross = document.createElement('div')

    li.setAttribute('data-id', cafeDoc.id)
    name.textContent = cafeDoc.data().name
    city.textContent = cafeDoc.data().city
    cross.textContent = 'x'

    li.appendChild(name)
    li.appendChild(city)
    li.appendChild(cross)

    cafeList.appendChild(li)

    //delete data
    cross.addEventListener('click', (e) => {
        e.stopPropagation()

        let id = e.target.parentElement.getAttribute('data-id')

        console.log(id)

        deleteDoc(doc(db,"cafe",id))
    })
}

同时修改调用renderCafe的循环代码：

querySnapshot.forEach((cafeDoc) => {
  renderCafe(cafeDoc)
});

方案2：给导入的doc函数起别名 #

如果不想修改参数名，可以在导入时给doc函数设置别名，避免作用域冲突：

import { getFirestore, doc as firestoreDoc, collection, getDocs, addDoc, deleteDoc } from 'https://www.gstatic.com/firebasejs/9.14.0/firebase-firestore.js'

然后在删除逻辑中使用别名：

deleteDoc(firestoreDoc(db,"cafe",id))

原理说明 #

JavaScript采用函数作用域，函数内部的参数变量会覆盖外部同名的全局/模块导入变量。修改参数名或使用别名后，就能正确引用Firebase SDK提供的doc构造函数，从而正常执行删除文档的操作。

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