Passing an asynchronous function into onSnapshot

Question

I need to run an asynchronous function from onSnapshot, but onSnapshot is not an asynchronous function itself. How can I run an asynchronous function upon receiving notification that my collection has changed? Is there a way to work around this?

//Adds a listener to the user's offercandidate doc then sets the remote description to what appears in the document
let unsubscribeFromOffer = negDoc
  .collection("users")
  .doc(sessionStorage.getItem("userID"))
  .collection("offer-candidates")
  .onSnapshot(() => {
    postReturnAnswer();
  });

async function postReturnAnswer() {
  let doc = await negDoc
    .collection("users")
    .doc(sessionStorage.getItem("userID"))
    .collection("offer-candidates")
    .doc("offer")
    .get();

  let newPeerConnection = new UserConnection(
    servers,
    doc.data()["offer"]["senderID"]
  );

  newPeerConnection.userPeerConnection.setRemoteDescription(
    doc.data()["offer"]["offer"]
  );

  let connAnswerDescription =
    await peerConnection.userPeerConnection.createAnswer();

  await peerConnection.userPeerConnection.setLocalDescription(
    connAnswerDescription
  );

  await negDoc
    .collection("users")
    .doc(sessionStorage.getItem("userID"))
    .collection("answer-candidates")
    .add({
      answer: JSON.stringify(
        peerConnection.userPeerConnection.localDescription
      ),
    });

  peerConnections.push(peerConnection);
}

Error message:

Answer 1

Based on your code above, you're getting a single document on your async function. Looking at the Get a Document, it shows how to properly retrieve the contents of a single document using get():

I managed to get the error of undefined by using your code above. Using the code in the documentation would solve your error. You may want to look at the code below:

let unsubscribeFromOffer = negDoc
  .collection("users")
  .doc(sessionStorage.getItem("userID"))
  .collection("offer-candidates")
  .onSnapshot(() => {
    postReturnAnswer();
  });
    
async function postReturnAnswer() {
  let doc = await negDoc
    .collection("users")
    .doc(sessionStorage.getItem("userID"))
    .collection("offer-candidates")
    .doc("offer")
    .get()
    // This would map the data from the document
    .then((doc) => {
      // Check if the document exists.
      if (doc.exists) {   
        let newPeerConnection = new UserConnection(
          servers,
          // On this line, you already accessed on document level so you wont need to call the document again, just call the fieldname.
          doc.data().Fieldname
        );

        newPeerConnection.userPeerConnection.setRemoteDescription(
          // Same with this one.
          doc.data().Fieldname
        );

        let connAnswerDescription =
          await peerConnection.userPeerConnection.createAnswer();

        await peerConnection.userPeerConnection.setLocalDescription(
          connAnswerDescription
        );

        await negDoc
          .collection("users")
          .doc(sessionStorage.getItem("userID"))
          .collection("answer-candidates")
          .add({
            answer: JSON.stringify(
              peerConnection.userPeerConnection.localDescription
            ),
          });

        peerConnections.push(peerConnection);
      } else {
          // doc.data() will be undefined in this case
          console.log("No such document!");
      }
    }).catch((error) => {
        console.log("Error getting document:", error);
    });
}