База данных Firebase Firestore с использованием JS Ошибка: Uncaught (в обещании) ReferenceError: do c не определено

Question

Итак, я сейчас работаю над своим проектом, который использует систему баз данных Firebase Firestore от Google. В начале я просто добавляю некоторый код из Firebase для его инициализации, а также некоторый код для получения документа из него. Итак, мой первоначальный план - это basi c, который получает документ из базы данных и добавляет его в документ HTML. В начале после инициализации и доступа к базе данных внутри const с именем "db" нет проблем, как в названии ("Referenceerror ..."), и если я протестировал его в консоли, он будет правильно показывать мои данные из базы данных. Но после того, как я добавил код JS в DOM и добавил данные в HTML, появилась ошибка. Может кто-нибудь, пожалуйста, помогите мне? Я действительно новичок ie в этом случае Firebase. Но да, я искал эту проблему на многих форумах и ничего не нашел. Вот какая-то часть моего HTML и JS кода

1.) HTML

<script>
    var firebaseConfig = {
        apiKey: "AIzaSyARW1T5mnayv7XVsHnfP_uc0jO-ck11ykw",
        authDomain: "sde-sale-stock.firebaseapp.com",
        databaseURL: "https://sde-sale-stock.firebaseio.com",
        projectId: "sde-sale-stock",
        storageBucket: "sde-sale-stock.appspot.com",
        messagingSenderId: "247739189879",
        appId: "1:247739189879:web:0f809640941c5d3e341472",
        measurementId: "G-VS6QCRD18K"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    firebase.analytics();
    const db = firebase.firestore();

</script>
<script src="js-in1.js"></script>

2.) JS

//DOMstart
const docTarget = document.querySelector('#wrapper');

function insertDoc(){
        //creation
    let box = document.createElement('div');
    let header = document.createElement('h4');
    let hargaBeli = document.createElement('p');
    let p2 = document.createElement('p');
    let hargaJual = document.createElement('p');
    let p4 = document.createElement('p');

    //insertion
    box.setAttribute('data-id', doc.id);
    header.textContent = doc.data().name;
    hargaBeli.innerHTML = "HB";
    p2.textContent = doc.data().HB;
    hargaJual.innerHTML = "HJ";
    p4.textContent = doc.data().HJ;

    //naming
    box.classname = "box";
    header.className = "title-box";
    hargaBeli.className = "tc-1";
    p2.className = "tc-2";
    hargaJual.className = "tc-3";
    p4.className = "tc-4";

    //box-naming plus deletion ops
    hitung++;
    box.className = "box " + hitung;
    box.onclick = function(){
                        if (confirm('Apa kamu yakin mau menghapus produk ini?')) {
                            this.parentElement.removeChild(this);
                        } else {
                        console.log('Tidak jadi menghapus produk.');
                        }
    }

    //appending...
    box.appendChild(header);
    box.appendChild(hargaJual);
    box.appendChild(p2);
    box.appendChild(hargaBeli);
    box.appendChild(p4);
    docTarget.appendChild(box); 


      console.log(box.className + "Creation Tracker"); //detection
}

    //get doc
    db.collection('Product').get().then((snapshot) => {
        snapshot.docs.forEach(doc => {
            console.log(doc.data());
            insertDoc(doc);
        })
    })

Answer 1

В определении вашей insertDoc() функции вы не включаете никаких параметров, поэтому внутри функции doc не определено.

В дополнение к вызову функции с insertDoc(doc) необходимо добавить этот doc в качестве параметра функции следующим образом:

function insertDoc(doc) {

    //....    

    //insertion
    box.setAttribute('data-id', doc.id);  // Now doc is defined
    header.textContent = doc.data().name;

    //....   
}