Why firebase give this error when I use onSnapshot?-CodePudding

Error itself : Uncaught FirebaseError: Expected type 'pa', but it was: a custom $n object

firebase file :

import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
import { getFirestore } from 'firebase/firestore/lite'

const firebaseConfig = {
  apiKey: 'API_KEY',
  authDomain: 'AUTH_DOMAIN',
  projectId: 'PROJECT_ID',
  storageBucket: 'STORAGE_BUCKET',
  messagingSenderId: 'MESSAGING_SENDER_ID',
  appId: 'APP_ID',
}

const firebaseApp = initializeApp(firebaseConfig)
const db = getFirestore(firebaseApp)
const auth = getAuth(firebaseApp)

export { db, auth }

Request itself :

useEffect(() => {
    //getPosts()
    const unsubscribe = onSnapshot(collection(db, 'cities'), (snapshot) => {
      const postsList = snapshot.docs.map((doc) => ({
        id: doc.id,
        data: doc.data(),
      }))
      setPosts(postsList)
    })
    return () => {
      unsubscribe()
    }
  }, [])

I tried to change some imports like other recommend but just got another error

CodePudding user response：

Firestore Lite SDK does not support listeners. Try importing getFirestore() from the standard SDK.

import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
import { getFirestore } from 'firebase/firestore' // <-- remove /lite

const firebaseConfig = {...}

const firebaseApp = initializeApp(firebaseConfig)
const db = getFirestore(firebaseApp)
const auth = getAuth(firebaseApp)

export { db, auth }

import { db } from './path/to/firebase';
import { collection, onSnapshot } from 'firebase/firestore';

useEffect(() => {
  const unsubscribe = onSnapshot(collection(db, 'cities'), (snapshot) => {
    const postsList = snapshot.docs.map((doc) => ({
      id: doc.id,
      data: doc.data(),
    }))
    setPosts(postsList)
  })
}, [])