Wow, this one has been quite a challenge for me. I had to go back to firebase9.4.0 in order to pinpoint where my code was causing errors.
The error: https://i.sstatic.net/DLNPZ.png
In a separate file named queries.config.js, I gather all the necessary subcollections:
import { query, collection, getDocs } from "firebase/firestore";
import { db } from "../firebase/firebaseConfig";
const q1 = query(
collection(db, "hairstyles/locs-hair-treatment/Locs Hair Treatment")
);
const q2 = query(
collection(
db,
"hairstyles/locs-styles & protective-styles/Locs Styles & Protective Styles"
)
);
// Remaining queries omitted for brevity
export { q1, q2, ... };
Here's a snippet of my firebaseConfig file:
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
// Remaining config details omitted for brevity
};
console.log(firebaseConfig);
// Initializing Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth();
const db = getFirestore();
export { auth, db };