如何循环 returns 空但实际上在 javascript 中有一个对象的对象

Question

我很难解决这个问题，实际上我从 firebase 得到了一个对象并将它们推送到一个数组中，但是当我在 foreach 中循环它时它给了我一个空结果：

控制台：

[]
0: {org_Address: 'Talisay City', middle_Name: 'Galve', rescuer_Num: 45344, last_Name: 'Primavera', first_Name: 'Jazon', …}
1: {coordinates: Kc, org_Address: 'Talisay City', rescuer_Num: 54552342, first_Name: 'Francisco', middle_Name: 'Palinguva', …}
2: {rescuer_Num: 533452, rescue_Org: 'Talisay City Disaster Risk Reduction and Management Office (TCDRRMO)', coordinates: Kc, date_Registered: at, first_Name: 'Berto', …}
3: {middle_Name: 'Arroyo', org_Address: 'Talisay City', rescuer_Num: 545234212, last_Name: 'Donasco', first_Name: 'Brent', …}
4: {coordinates: Kc, middle_Name: 'Delacruz', date_Registered: at, first_Name: 'John', rescuer_Num: 2342314, …}
5: {coordinates: Kc, first_Name: 'Kenneth John', middle_Name: 'N/A', rescuer_Num: 534534535, org_Address: 'Talisay City', …}
6: {last_name: 'adsf', rescue_Org: 'asdf', middle_name: 'adsf', first_name: 'asdf', org_Address: 'asdf', …}
7: {middle_Name: 'Philip', rescue_Org: 'Radiant Volunteer', first_Name: 'Ace', coordinates: Kc, rescuer_Num: 123124, …}
8: {last_name: 'aaa', rescuer_Num: 'aaa', org_Address: 'aaa', rescue_Org: 'aaa', middle_name: 'aaa', …}
9: {org_Address: 'Talisay City', coordinates: Kc, rescuer_Num: 4353453, rescue_Org: 'Talisay City Disaster Risk Reduction and Management Office (TCDRRMO)', last_Name: 'Cock', …}
length: 10
[[Prototype]]: Array(0)

这是我的实现：

// from other source file
export async function firebaseReadDoc(targetDocument) {
    let dataCollected = [];
    getDocs(collectionReference(targetDocument))
        .then(snapshot => {
            snapshot.docs.forEach(doc => {
                dataCollected.push({...doc.data(), id: doc.id });
            });
            console.log(SUCCESS_READ_FIREBASE);
        }).catch(e => {
            console.error(WARNING_FAIL_READ_FIREBASE);
            console.error(e.message);
        });
    return dataCollected
}
// from other source file
function readDocRescuer() {
    const targetDocument = "public_rescuers";
    const data = firebaseReadDoc(targetDocument);
    data.then(response => {
        console.log(response);
        response.forEach(doc => {
            console.log(doc.first_name);
        })
    })
}

然后当我登录时 doc.first_name 它没有显示。

Answer 1

firebaseReadDoc 是一个异步函数（returns 一个 Promise），因此您必须在 readDocRescuer 中执行 await firebaseReadDoc(targetDocument)。您还需要使 readDocRescuer 成为一个异步函数。

或者你可以firebaseReadDoc(targetDocument).then(//read your data);

Answer 2

正如 Tu Nguyen 所解释的，您需要管理 getDocs() 方法的异步方面。以下应该可以解决问题：

// from other source file
export async function firebaseReadDoc(targetDocument) {
    let dataCollected = [];
    const snapshot = getDocs(collectionReference(targetDocument));
    snapshot.docs.forEach(doc => {
        dataCollected.push({...doc.data(), id: doc.id });
    });
    return dataCollected
}

// from other source file
async function readDocRescuer() {    // async function
    const targetDocument = "public_rescuers";
    const dataArray = await firebaseReadDoc(targetDocument);
    dataArray.forEach(doc => {
        console.log(doc.first_name);
    })
}

或者使用非异步函数。

function readDocRescuer() {   // non async function
    const targetDocument = "public_rescuers";
    firebaseReadDoc(targetDocument)
    .then(dataArray => {
        console.log(dataArray);
        dataArray.forEach(doc => {
            console.log(doc.first_name);
        })
    })
}

如何循环 returns 空但实际上在 javascript 中有一个对象的对象

How to loop in object that returns empty but actually has an object in javascript

javascript

firebase

google-cloud-firestore