Firebase v9 Firestore: getDocs and onSnapshot are never resolved nor rejected

[bilgehan-biricik]

Describe your environment

• Operating System version: macOS Monterey 12.4
• Browser version: Google Chrome - Version 103.0.5060.114
• Firebase SDK version: 9.9.0
• Firebase Product: firestore
• NextJS version: 12.1.4

Describe the problem

I have actually kind of same problem with this issue #5402 but with getDocs and also onSnapshot functions.

But my code look like this.

import { getDocs, collection, DocumentData, doc, DocumentReference } from "firebase/firestore";

console.log("before getDocs") // prints
const snapshot = await getDocs(collection(pageDocRef, "widgets"));
console.log("after getDocs") // never prints

The pageDocRef variable's type DocumentReference<DocumentData>

For workaround solution I do some thing like this and it works:

console.log("before getDocs") // prints
const snapshot = await getDocs(collection(firestore, pageDocRef.path, "widgets"));
console.log("after getDocs") // prints

Why first code is not working and the second one works?

For onSnapshot version:

const unsubscribe = onSnapshot(doc(firestore, props.dataDocRef.path), (doc) => {
  const docData = doc.data(); 
  console.log('reached') // prints
  if (!!docData) setData(camelize(docData));
});

Also dataDocRef's type DocumentReference<DocumentData>

 const unsubscribe = onSnapshot(props.dataDocRef, (doc) => {
  const docData = doc.data();
  console.log('reached') // never prints

  if (!!docData) setData(camelize(docData));
});

[bilgehan-biricik]

I found out the problem was happening because of how I set my pageDocRef variable. This variable is part of a complex object and I pass it to child components with using lodash's cloneDeep function. Turns out cloneDeep function has a problem when cloning DocumentReference<DocumentData type objects. When I remove it my problem was solved.