getDocs(collection(db, "products")) not returning any docs in Remix App Using Firebase and Shopify Hydrogen

[matrixvivi]

Trying to implement a default Firestore DB into my Remix web application that integrates with Shopify Hydrogen, and the getDocs query frustratingly returns a snapshot with no documents. I have followed the documentation almost verbatim. When I log the querySnapshot, it returns a snapshot with both 'docs' and 'oldDocs' properties with root objects of size: 0 (try catch didn't seem to offer any useful information either).

I have double checked that config is correct and that the products collection exists in Firestore with existing documents; I also ensured that Firestore security rules allow read/write access to the products collection (in test mode).

I'm really lost as to how to debug this further, especially since the query is so simple and logging doesn't seem to help. Maybe this might be a region issue (set to NA when I'm currently in South Korea), or an environment issue (something to do with Remix?).

Please let me know if I'm doing something wrong or if anyone has had a similar issue.

Config file:
`import {initializeApp} from 'firebase/app';
import {getFirestore} from 'firebase/firestore';

const firebaseConfig = {
apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.FIREBASE_APP_ID,
measurementId: process.env.FIREBASE_MEASUREMENT_ID,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export default db;
Relevant Code:
import db from '~/firebase-config';
import {collection, getDocs, query} from 'firebase/firestore';
...

export async function loader(args) {
const criticalData = await loadCriticalData(args);

return defer({...criticalData});
}

async function loadCriticalData({context, params, request}) {
const {handle} = params;
const {storefront} = context;

const products = []; // products array to store collection data

if (!handle) {
throw new Response(null, {status: 404});
}

const [{product}, variants, querySnapshot] = await Promise.all([
context.storefront.query(PRODUCT_QUERY, {
variables: {
handle,
selectedOptions: getSelectedProductOptions(request),
},
}),
context.storefront.query(VARIANTS_QUERY, {
variables: {handle: params.handle},
}),
getDocs(collection(db, 'products')),
]);

// organize products collection array
console.log('querySnap:', JSON.stringify(querySnapshot));
querySnapshot.forEach((doc) => {
products.push(doc.data());
});
return {
product,
variants,
products,
};
}`

Example log output:
{ "_firestore": { "app": { ... }, "databaseId": { "projectId": "...", "database": "(default)" }, "settings": { ... } }, "_snapshot": { "query": { ... }, "docs": { "keyedMap": { "root": { "size": 0 } }, "sortedSet": { "root": { "size": 0 } } }, "oldDocs": { "keyedMap": { "root": { "size": 0 } }, "sortedSet": { "root": { "size": 0 } } }, "docChanges": [], "mutatedKeys": { "data": { "root": { "size": 0 } } }, "fromCache": true, "syncStateChanged": true, "excludesMetadataChanges": false, "hasCachedResults": false }, "metadata": { "hasPendingWrites": false, "fromCache": true }, "query": { "converter": null, "_query": { "path": { "segments": ["products"], "offset": 0, "len": 1 } } }, "type": "collection", "firestore": { ... } }