错误：未捕获（承诺中）类型错误：文档不是 HTMLButtonElement.<anonymous> 处的函数

Question

所以，我尝试为我的网站遵循 The Net Ninja 教程。这是我关注的tutorial link。但是我必须更改一些代码，因为它们的 firebase 版本太旧了。

我想做的是删除该行，但出现了这个错误：

Uncaught (in promise) TypeError: doc is not a function at HTMLButtonElement.<anonymous>

这是javascript编码：

function renderList(doc){
        let trow = document.createElement('tr');
        let td1 = document.createElement('td');
        let td2 = document.createElement('td');
        let ControlDiv = document.createElement("div");

        const date = doc.data().created.toDate().toDateString();

        trow.setAttribute('data-id', doc.id);
        td1.textContent = doc.data().email;
        td2.textContent = date;
        ControlDiv.innerHTML = '<button id="DelModBtn" type="button" class="btn btn-danger btn-primary my-2 ml-2">Delete</button>'

        trow.appendChild(td1);
        trow.appendChild(td2);
        trow.appendChild(ControlDiv);
        
        adminList.appendChild(trow);

        //deleting the data
        const deleteBtn = document.querySelector('#DelModBtn');

        deleteBtn.addEventListener('click', async (e) => {
            e.stopPropagation();
            let id = e.target.parentElement.getAttribute('data-id');
            await deleteDoc(doc(firestore, "admin", id));
        })
    }

谁能告诉我怎么回事？

Answer 1

看来“doc”是一个对象，所以不能把它当成函数来调用。

这是一个函数和对象方法调用的例子：

function sayHelloTo(name) {
    console.log('Hello to ' + name);
}

let helloTo = {
    getMessage: function(params) {
      return "Hello to ";
    },
    chris: function(params) {
        console.log(this.getMessage() + 'chris');
    },
    bob: function(params) {
        console.log(this.getMessage() + 'bob');
    },
    bruh: function(params) {
        console.log(this.getMessage() + 'bruh');
    },
}

sayHelloTo('YOU'); // here I call a function such as is wrong in your code : "doc(firestore, "admin", id)"
helloTo.chris(); // here I call object method such as "doc.data()"
helloTo.bob();
helloTo.bruh();

我看了视频，施法者正在使用一个名为“db”的对象，他可能会在调用“db.collection('cafes')”后返回另一个对象，所以解释一下，可能是这样的：

// I've created some example classes to match with your turorial video


let docClass = class Doc { // a class is a more complex object, that is used to create a lot of same object
    // constructor is a native method that is call at creation = "new docClass(0,'data')"
    // it will first execute code in "contructor" and then return "this", this is the current created object of the class

    constructor(id,indata){
        this.id = id;
        this.indata = indata;
    }
    data(){
        return this.indata;
    }
    delete(){
        return 'i should delete something';
    }
}

let collectionClass = class Collection { // it's a class too
    constructor(name){
        this.name = name;
        this.docs = {};
    }
    doc(id){
        return this.docs[id];
    }
    addDoc(doc){
        this.docs[doc.id] = doc;
    }
};

let dbClass = class DB { // it's a class too
    constructor(name){
        this.collections = [];
    }
    collection(collectionName) {
        let index = this.collections.map(col=>col = col.name).indexOf(collectionName);
        return this.collections[index];
    }
    addCollection(col){
        this.collections.push(col);
    }
}

// so here we create object from classes
let db = new dbClass('mydatabase');
let collection = new collectionClass('mycollection');
let docs_examples = [
    new docClass(0,'data0'),
    new docClass(1,'data1'),
    new docClass(2,'data2'),
    new docClass(3,'data3'),
];


// here we call addDoc method to add Docs in collection object
for (const doc of docs_examples) {
    collection.addDoc(doc);
}

// and here we add collection to db object
db.addCollection(collection);




// here you can see some similar lines with your tutorial video, but now you can understand and read how it works
console.log(db.collection('mycollection'));
console.log(db.collection('mycollection').doc(2));
console.log(db.collection('mycollection').doc(2).delete());
console.log(db.collection('mycollection').doc(2).data());