useFirestore breaks the app when used in a function in the utils folder and the page is refreshed (nuxt)

[StefanGhiban]

Reproduction

Steps to reproduce the bug

I have the following code in a file called "firestoreReferences.ts" in the nuxt utils folder:
import { collection } from "firebase/firestore";

const db = useFirestore();

export const restaurantsCollRef = collection(db, "restaurants");
export const bookingsCollRef = collection(db, "bookings");

Expected behavior

The references should be auto imported and used throughout the app with no issue.

Actual behavior

On page refresh, the app breaks with the following error: Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app).

If I just access the page, without refreshing, it works fine, but it is because maybe firebase has already loaded.

Additional information

Is this a bad practice? or is there a way to ensure firebase has loaded before using the useFirestore composable?