在 NextJS 中使用 firestore 时发生 Firebase 错误

Question

I'm using firebase for my project, and I was able to successfully implement authentication in my app. Unfortanetly, when I try to use firestore in my project I have an error that tells me to initialize my app, but I already have a fie for this, and I use every firebase method from there.

import firebase from "firebase/app";                                                                      
     import "firebase/auth"; // If you need it                                                                 
    import "firebase/firestore"; // If you need it                                                            
    import "firebase/storage"; // If you need it                                                              
                                                                                                               
     const clientCredentials = {                                                                               
       apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,                                                       
       authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,                                               
       databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,                                             
       projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,                                                 
      storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,                                         
      messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
      appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,                                                         
    };                                                                                                        
                                                                                                              
    if (typeof window !== "undefined" && !firebase.apps.length) {                                             
      firebase.initializeApp(clientCredentials);                                                              
      if ("measurementId" in clientCredentials) firebase.analytics();                                         
    }                                                                                                         
                                                                                                              
                                                                                                            
   export default firebase;

Every time I want to use firebase, I just import firebase from this file and use it, for example

firebase.firestore()

Am I doing something wrong?

Answer 1

I don't know if this will help you but this is exactly how I do it.

// init.js
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/storage';
import 'firebase/firestore';

const firebaseConfig = {
// configs
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// Enable Firestore Cache
firebase.firestore()
    .enablePersistence()
    .catch((err) => {
        console.error(err);
    });

export default firebase;

// firestore.js
import firebase from './init';

/* FIRESTORE
*********************/
export const firestore = firebase.firestore();