FirebaseError：collection() 的第一个参数应该是 CollectionReference、DocumentReference 或 FirebaseFirestore，正在迁移到 v9 firebase答案

【问题标题】：FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore, migrating to v9 firebaseFirebaseError：collection() 的第一个参数应该是 CollectionReference、DocumentReference 或 FirebaseFirestore，正在迁移到 v9 firebase
【发布时间】：2021-11-25 14:36:30
【问题描述】：

我正在努力迁移 firebase v8 -> v9。我有一个带有 Storybook 的组件库，用于演示组件。该库通过 NPM/Github 包作为包发布。

迁移并没有给我带来任何麻烦，除了这个。在我的网络应用中导入和使用下面的组件时会出现问题。

以下代码在 Storybook 中完美运行，但在将组件导入我的 Web 应用程序时失败。

const useGetLanguages = (firestoreInstance: Firestore): Response => {
  const [loading, setLoading] = useState(false)
  const [data, setData] = useState<ILanguage[]>([])
  console.log('firestoreInstance: ', firestoreInstance) // Logs firestore instance
  
  const fetch = useCallback(() => {
    if (!firestoreInstance) return
    setLoading(true)
    
    const collectionRef = collection(firestoreInstance, 'data')
    console.log('blip') // this logs fine
    getDoc(doc(collectionRef, 'tags')) // crashes here...
      .then(res => {
        const data = res?.data()?.languages
        if (data) {
          const languages = (Object.values(data) as unknown) as ILanguage[]
          if (languages) {
            setData(languages.sort(sortBy('name')))
          }
        }
      })
      .finally(() => {
        setLoading(false)
      })
  }, [firestoreInstance])

我最初使用：

getDoc(doc(firestoreInstance, 'data', 'tags'))

这也适用于 Storybook，但在我的网络应用程序中使用此挂钩导航到页面时，我收到此错误：

未捕获的 FirebaseError：collection() 的第一个参数应为 CollectionReference， DocumentReference 或 FirebaseFirestore

我已经阅读了类似的问题，但它并没有解决问题。任何意见将不胜感激！

编辑：我正在像这样导入 firebase：

// firebaseConfig.ts

import { FirebaseOptions, initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
import { getFirestore } from 'firebase/firestore'
import { getFunctions } from 'firebase/functions'

const config: FirebaseOptions = {
// ...config
}

export const app = initializeApp(firebaseConfig)
export const authInstance = getAuth(app)
export const firestoreInstance = getFirestore(app)
export const functionsInstance = getFunctions(app)

然后我导入 firestoreInstance 并将其传递给从包中导入的函数/组件。

我将尝试传递配置本身并在包中使用它并发布结果。

【问题讨论】：

请说明您如何导入 Firebase。
@JMGelilio 我已经用导入信息更新了问题。

标签： javascript firebase google-cloud-firestore

【解决方案1】：

原来是我们这边的一次失误。我们需要在我们的package.json 中以peerDependency 的形式安装firebase。迁移到 MUI 5 时遇到类似问题。如果其他人遇到在您的情况下没有意义的晦涩错误，可能值得一试，检查您的依赖项在哪里！

【讨论】：