I'm building a simple Next.js web application that connects to a Firestore (Firebase). Everything seems to initialize correctly, but when the connection is finally initiated, the configuration seems to be changed. I have logged the Firestore object (console.log(firestore)) and noticed an unexpected difference between the terminal and the browser.
firebase.config.js
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
};
const firebase = initializeApp(firebaseConfig);
const firestore = getFirestore(firebase);
export default firestore;
index.js
import { collection } from "firebase/firestore"
import { useCollection } from "react-firebase-hooks/firestore";
import firestore from '../firebase.config'
export default function Home() {
console.log(firestore);
const [accounts, accountsLoading, accountsError] =
useCollection(collection(firestore, "accounts"),{}
);
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app"/>
<link rel="icon" href="/favicon.ico"/>
</Head>
<main className={styles.main}>
{accountsError && <strong>Error: {JSON.stringify(accountsError)}</strong>}
{accountsLoading && <span>Loading..</span>}
{accounts && accounts.docs.map((account) => (
<div key={account.get('storage_account')}>
{JSON.stringify(account)}
</div>
))}
</main>
</div>
)
}
Correct output (in terminal)
Firestore {
...
_databaseId: DatabaseId {
projectId: 'algofi-liquidation-dashb-44465',
database: '(default)'
},
...
}
Incorrect output (browser)
gc {
type: "firestore",
...
_databaseId: vt
database: "(default)"
projectId: undefined
isDefaultDatabase: (...)
...
}
This results in a Firestore connection error: "The project undefined does not exist or it does not contain an active Cloud Datastore or Cloud Firestore database."
I don't know what the difference is between the object as logged into the terminal and the one in the browser.