Firebase Firestore - 'Failed to get document because the client is offline'

Question

I'm using NextJS and trying to fetch data from firestore inside a component after I press a button. I have described my function as this:

const handleSkip = async (e) => {
  e.preventDefault();
  const userDocRef = doc(db, "users", session?.id);

  try {
    const userDocs = await getDoc(userDocRef);

    await updateDoc(userDocRef, {
      city: "TK",
    });
  } catch (error) {
    console.log(error);
  }
};

but when I do this I receive the following error inside DevTools console:

next-dev.js?3515:32 @firebase/firestore: Firestore (9.4.1): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=not-found]: The project undefined does not exist or it does not contain an active Cloud Datastore or Cloud Firestore database. Please visit http://console.cloud.google.com to create a project or https://console.cloud.google.com/datastore/setup?project=undefined to add a Cloud Datastore or Cloud Firestore database. Note that Cloud Datastore or Cloud Firestore always have an associated App Engine app and this app must not be disabled.
This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.

and

FirebaseError: Failed to get document because the client is offline.
    at next (index.esm2017.js?a9d0:14370:1)
    at eval (index.esm2017.js?a9d0:13834:1)

Strangely, I'm also using next-auth and the firestore data fetching works perfectly fine inside the session callback functions. Is there any fix for this? I've tried Firebase 9.4 and 9.6 both, but same result.