In Firebase, the async function completes the promise even as the function body is still executing

Question

In Firebase, the async function completes the promise even as the function body is still executing

I'm currently facing an issue with an async function I've written. It takes an array of custom objects as an argument, loops through each object, retrieves data from Firestore, converts it into another custom object, and adds it to an array. The function then returns the length of this array.

async function getCompsReceived(theInterestedPeople: InterestedPerson[]) {

  const whatsNewObjects: WhatsNewObject[] = []

  theInterestedPeople.forEach(async (person) => {

    const documentsSnapshot = await 
    db.collection('Users').doc(person.uid).collection('complimentsReceived')
      .orderBy('receivedTime', 'desc')
      .limit(documentLimit)
      .get()

  if (documentsSnapshot.empty) {
    console.log(`${person.userName} has no compsReceived`)
    return
  }


  await documentsSnapshot.forEach((newCompReceived: { receiverUid: string; receiverUserName: string; 
    complimentsReceivedContent: string | null; hasImage: boolean | null; senderUid: string | null; 
      senderUserName: string | null; noOfLikes: number | null; receivedTime: number | null; 
        complimentId: string | null} ) => {
         //Add each new Compliment to the WhatsNewObjects Array
         const whatsNewDoc = new WhatsNewObject(
           newCompReceived.receiverUid,
           newCompReceived.receiverUserName,
           true,
           newCompReceived.complimentsReceivedContent,
           newCompReceived.hasImage,
           newCompReceived.senderUid,
           newCompReceived.senderUserName,
           newCompReceived.noOfLikes,
           newCompReceived.receivedTime,
           newCompReceived.complimentId,
           'PERSON_COMPLIMENT_RECEIVED'
         )

    whatsNewObjects.push(whatsNewDoc)

  })

  console.log(`length of whatsNewObjects after adding ${person.userName}'s compsReceived is      
    ${whatsNewObjects.length}`)

})

console.log(`returning the length of WhatsNewObjects at getCompsReceived which is ${whatsNewObjects.length}}`)
    return whatsNewObjects.length

}

However, I've noticed that this function always returns a value of 0. Looking at the console logs in Firebase, it seems that the body of the function is executed after the function has already returned the Promise of type number.

Could someone please assist me in figuring out how to make the function wait for the body to be executed before returning the length of whatsNewObjects?

typescript firebase async-await google-cloud-functions

Answer 1

Answer №1

Avoid using forEach to iterate over async code because it does not support await. Instead, consider using for..of for handling asynchronous operations:

async function getCompsReceived(theInterestedPeople: InterestedPerson[]) {

    const whatsNewObjects: WhatsNewObject[] = []

    for (const person of theInterestedPeople) {
        const documentsSnapshot = await db.collection('Users').doc(person.uid).collection('complimentsReceived')
            .orderBy('receivedTime', 'desc')
            .limit(documentLimit)
            .get();

        if (documentsSnapshot.empty) {
            console.log(`${person.userName} has no compsReceived`)
            return;
        }

        documentsSnapshot.forEach((newCompReceived: {
            receiverUid: string; receiverUserName: string;
            complimentsReceivedContent: string | null; hasImage: boolean | null; senderUid: string | null;
            senderUserName: string | null; noOfLikes: number | null; receivedTime: number | null;
            complimentId: string | null
        }) => {
            //Add each new Compliment to the WhatsNewObjects Array
            const whatsNewDoc = new WhatsNewObject(
                newCompReceived.receiverUid,
                newCompReceived.receiverUserName,
                true,
                newCompReceived.complimentsReceivedContent,
                newCompReceived.hasImage,
                newCompReceived.senderUid,
                newCompReceived.senderUserName,
                newCompReceived.noOfLikes,
                newCompReceived.receivedTime,
                newCompReceived.complimentId,
                'PERSON_COMPLIMENT_RECEIVED'
            );
            whatsNewObjects.push(whatsNewDoc);

        })
        console.log(`length of whatsNewObjects after adding ${person.userName}'s compsReceived is ${whatsNewObjects.length}`);
    }
    console.log(`returning the length of WhatsNewObjects at getCompsReceived which is ${whatsNewObjects.length}}`);
    return whatsNewObjects.length;
}

Answer 2

Avoid using forEach to iterate over async code because it does not support await. Instead, consider using for..of for handling asynchronous operations:

async function getCompsReceived(theInterestedPeople: InterestedPerson[]) {

    const whatsNewObjects: WhatsNewObject[] = []

    for (const person of theInterestedPeople) {
        const documentsSnapshot = await db.collection('Users').doc(person.uid).collection('complimentsReceived')
            .orderBy('receivedTime', 'desc')
            .limit(documentLimit)
            .get();

        if (documentsSnapshot.empty) {
            console.log(`${person.userName} has no compsReceived`)
            return;
        }

        documentsSnapshot.forEach((newCompReceived: {
            receiverUid: string; receiverUserName: string;
            complimentsReceivedContent: string | null; hasImage: boolean | null; senderUid: string | null;
            senderUserName: string | null; noOfLikes: number | null; receivedTime: number | null;
            complimentId: string | null
        }) => {
            //Add each new Compliment to the WhatsNewObjects Array
            const whatsNewDoc = new WhatsNewObject(
                newCompReceived.receiverUid,
                newCompReceived.receiverUserName,
                true,
                newCompReceived.complimentsReceivedContent,
                newCompReceived.hasImage,
                newCompReceived.senderUid,
                newCompReceived.senderUserName,
                newCompReceived.noOfLikes,
                newCompReceived.receivedTime,
                newCompReceived.complimentId,
                'PERSON_COMPLIMENT_RECEIVED'
            );
            whatsNewObjects.push(whatsNewDoc);

        })
        console.log(`length of whatsNewObjects after adding ${person.userName}'s compsReceived is ${whatsNewObjects.length}`);
    }
    console.log(`returning the length of WhatsNewObjects at getCompsReceived which is ${whatsNewObjects.length}}`);
    return whatsNewObjects.length;
}

Answer 3

Answer №2

The issue revolves around the usage of the forEach method, which runs asynchronously even when async/await is employed in the callback function. To resolve this, simply replace forEach with any form of for loop.

for (let index = 0; index < theInterestedPeople.length; index++) {
    const person = array[index];
    ....your code
}
// or
for (const person of theInterestedPeople) {
    
}
// or

Answer 4

The issue revolves around the usage of the forEach method, which runs asynchronously even when async/await is employed in the callback function. To resolve this, simply replace forEach with any form of for loop.

for (let index = 0; index < theInterestedPeople.length; index++) {
    const person = array[index];
    ....your code
}
// or
for (const person of theInterestedPeople) {
    
}
// or

In Firebase, the async function completes the promise even as the function body is still executing

Answer №1

Answer №2

Similar questions

Encountering a Login Issue with Firebase Google Authentication in Angular 16

Implementing Formik in React for automatic updates to a Material-UI TextField when blurred

What is the best way to convert a promise using an async await function into an observable?

Generating output from a callback function in TypeScript

The Semantic UI Tabs in Angular 4 only function properly once they have been clicked on

Utilizing HTML imports in Typescript for efficient use as TemplateStringLiteral

Navigating Through Angular Components

Import statements cannot be used outside of a module when working with a private npm package in cucumber.js

What is the best way to retrieve data from Firebase and then navigate to a different page?

The presence of a setupProxy file in a Create React App (CRA) project causes issues with the starting of react-scripts,

Having trouble looping through an array in Angular 2?

Getting the hang of using and translating typescript .tsx files with jsx in React-native

Establishing a typescript class as an interface

Is the callback not being triggered in the Stripe webhook? Or could I be overlooking something important?

Typescript: The .ts file does not recognize the definition of XMLHttpRequest

Using the decorator in VueJS Typescript allows you to easily define dynamic computed properties

Put Jest to the test by testing the appendFileSync function

Ways to increase the number of responses in an Express app after the initial response

The Enigmatic Essence of TypeScript

There was an unhandled exception that occurred due to a missing file or directory with the lstat error on 'D:a1s ode_modulesquill'