在firebase中删除文档时,doc不是函数错误

lskq00tm  于 2022-12-14  发布在  其他
关注(0)|答案(1)|浏览(114)

TypeError:文档不是函数
我正在使用firebase文档删除文档代码

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

bt在这里它是显示暂停由于异常在浏览器中

// Import the functions you need from the SDKs you need
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.14.0/firebase-app.js';
import { getFirestore,doc, collection, getDocs,addDoc,deleteDoc } from 'https://www.gstatic.com/firebasejs/9.14.0/firebase-firestore.js'

const firebaseConfig = {
  apiKey: "AIzaSyC_qbiPqjPCoK4yQ2lzjeinQhx7Co1mEbE",
  authDomain: "cafe-review-804eb.firebaseapp.com",
  databaseURL: "https://cafe-review-804eb-default-rtdb.asia-southeast1.firebasedatabase.app",
  projectId: "cafe-review-804eb",
  storageBucket: "cafe-review-804eb.appspot.com",
  messagingSenderId: "933248008537",
  appId: "1:933248008537:web:a15fe6338d071f2a3c0c48",
  measurementId: "G-2JX7DVQTM2"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app)

const cafeList = document.querySelector("#cafe-list")
const form = document.querySelector("#add-cafe-form")

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

    li.setAttribute('data-id',doc.id)
    name.textContent = doc.data().name
    city.textContent = doc.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))
    })
}

const querySnapshot = await getDocs(collection(db, "cafe"));
querySnapshot.forEach((doc) => {
  renderCafe(doc)
});

// save form
form.addEventListener('submit', (e)=> {
    e.preventDefault()

    const docRef =  addDoc(collection(db,"cafe"),{
        name: form.name.value,
        city: form.city.value
    })

    form.name.value = ""
    form.city.value = ""
})
zkure5ic

zkure5ic1#

问题是在renderCafe函数中有两个doc的定义:
1.从Firestore SDK中导入的docimport { ... doc, ... } from
1.在function renderCafe(doc){中传递给renderCafedoc参数。
由于参数的作用域比导入的作用域更近,因此在renderCafe函数中,doc引用的是参数,而不是导入的函数。
要解决这个问题,给予参数一个不同的名称,如'':

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

    li.setAttribute('data-id',dbdoc.id)
    name.textContent = dbdoc.data().name
    city.textContent = dbdoc.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))
    })
}

相关问题