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 = ""
})
1条答案
按热度按时间zkure5ic1#
问题是在
renderCafe
函数中有两个doc
的定义:1.从Firestore SDK中导入的
doc
与import { ... doc, ... } from
。1.在
function renderCafe(doc){
中传递给renderCafe
的doc
参数。由于参数的作用域比导入的作用域更近,因此在
renderCafe
函数中,doc
引用的是参数,而不是导入的函数。要解决这个问题,给予参数一个不同的名称,如'':