title: How to solve FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore problem?
body: <p>I am trying to set up Firebase with next.js. I am getting this error in the console.</p>
  <blockquote>
  <p>FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore</p>
  </blockquote>
  <p>This is one of my custom hook</p>
  <pre><code>import { onAuthStateChanged, User } from '@firebase/auth'
  import { doc, onSnapshot, Unsubscribe } from 'firebase/firestore'
  import { useEffect, useState } from 'react'
  import { auth, fireStore } from './firebase'
  
  export const useUserData = () =&gt; {
    const [username, setUsername] = useState&lt;string | null&gt;(null)
  
    const [currentUser, setCurrentUser] = useState&lt;User | null&gt;(null)
  
    useEffect(() =&gt; {
      let unsubscribe: void | Unsubscribe
  
      onAuthStateChanged(auth, (user) =&gt; {
        if (user) {
          setCurrentUser(user)
          // The Problem is inside this try blog
          try {
            // the onsnapshot function is causing the problem
            console.log('firestore: ', fireStore)
            unsubscribe = onSnapshot(doc(fireStore, 'users', user.uid), (doc) =&gt; {
              setUsername(doc.data()?.username)
            })
          } catch (e) {
            console.log(e.message)
          }
        } else {
          setCurrentUser(null)
          setUsername(null)
        }
      })
  
      return unsubscribe
    }, [currentUser])
  
    return { currentUser, username }
  }
  </code></pre>
  <p>I also have this firebase.ts file where I initialized my firebase app</p>
  <pre><code>import { FirebaseApp, getApps, initializeApp } from 'firebase/app'
  import { getAuth } from 'firebase/auth'
  import { getFirestore } from 'firebase/firestore/lite'
  import { getStorage } from 'firebase/storage'
  
  const firebaseConfig = {
    apiKey: 'some-api',
    authDomain: 'some-auth-domain',
    projectId: 'some-project-id',
    storageBucket: 'some-storage-bucket',
    messagingSenderId: 'some-id',
    appId: 'some-app-id',
    measurementId: 'some-measurement-id',
  }
  
  let firebaseApp: FirebaseApp
  
  if (!getApps.length) {
    firebaseApp = initializeApp(firebaseConfig)
  }
  
  const fireStore = getFirestore(firebaseApp)
  const auth = getAuth(firebaseApp)
  const storage = getStorage(firebaseApp)
  
  export { fireStore, auth, storage }
  </code></pre>
  <p>I don't know whether the problem is in the project initialization. I am pretty sure the error is generated from my custom hook file. I also found out that there must be something wrong with <code>onSnapshot</code> function. Am I passing the docRef wrong or something? What am I doing wrong here?</p>
  <p>The <code>console.log(firestore)</code> log:</p>
  <pre><code>
      type: &quot;firestore-lite&quot;
      _app: FirebaseAppImpl
      _automaticDataCollectionEnabled: false
      _config: {name: &quot;[DEFAULT]&quot;, automaticDataCollectionEnabled: false}
      _container: ComponentContainer {name: &quot;[DEFAULT]&quot;, providers: Map(15)}
      _isDeleted: false
      _name: &quot;[DEFAULT]&quot;
      _options:
      apiKey: 'some-api'
      authDomain: 'some-auth-domain'
      projectId: 'some-project-id'
      storageBucket: 'some-storage-bucket'
      messagingSenderId: 'some-id'
      appId: 'some-app-id'
      measurementId: 'some-measurement-id'
      [[Prototype]]: Object
      automaticDataCollectionEnabled: (...)
      config: (...)
      container: (...)
      isDeleted: (...)
      name: (...)
      options: (...)
      [[Prototype]]: Object
      _credentials: Q {auth: AuthInterop}
      _databaseId: H {projectId: &quot;next-firebase-fireship&quot;, database: &quot;(default)&quot;}
      _persistenceKey: &quot;(lite)&quot;
      _settings: ee {host: &quot;firestore.googleapis.com&quot;, ssl: true, credentials: undefined, ignoreUndefinedProperties: false, cacheSizeBytes: 41943040, …}
      _settingsFrozen: false
      app: (...)
      _initialized: (...)
      _terminated: (...)
  
  </code></pre>