时间戳

首页 > 解决方案 > Firebase web v9 升级中断 react-firebase-hooks “useCollectionData()”

javascript - Firebase web v9 升级中断 react-firebase-hooks “useCollectionData()”

问题描述

我正在尝试将 React 项目中的一些 Firebase 代码更新为 Firebase 最近发布的新模块化 web v9 sdk。正在升级的项目使用react-firebase-hooks hook useCollectionData()，在更改为新的 sdk 时失败。当我尝试运行移植的代码时，我在控制台中收到以下错误输出 3 次。

index.esm.js:101 未捕获类型错误：v1.isEqual 不是函数

工作 web v8 代码的最小示例：

import firebase from 'firebase/app'
import 'firebase/firestore'
import { useCollectionData } from "react-firebase-hooks/firestore"


firebase.initializeApp({ //config here
})
const firestore = firebase.firestore();

function Foo() {
  const messagesRef = firestore.collection('messages')
  const query = messagesRef.orderBy('createdAt').limit(25)
  const [messages] = useCollectionData(query, { idField: 'id' })

  return (<> {messages} </>)
}

我尝试移植到导致错误的 v9：

import { initializeApp } from "firebase/app"
import { getFirestore } from "firebase/firestore"
import { useCollectionData } from "react-firebase-hooks/firestore"


const app = initializeApp({ //config here
})
const db = getFirestore(app)

function Foo() {
  const messagesRef = collection(db, "messages")
  const q = query(messagesRef, orderBy("createdAt"), limit(25))
  const [messages] = useCollectionData(q, { idField: "id" })
  
  return (<> {messages} </>)
}

我正在升级我的依赖项

"dependencies" : {
  "firebase": "^7.20.0",
  "react": "^16.13.1",
  "react-dom": "^16.13.1",
  "react-firebase-hooks": "^2.2.0",
}

至

"dependencies" : {
  "firebase": "^9.0.2",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "react-firebase-hooks": "^3.0.4",
}

这个 Firestore 文档包含我用来编写更新代码的示例。我还使用这个 Firestore 文档来更好地理解对collection().

谢谢你的帮助。

标签： javascriptreactjsfirebasegoogle-cloud-firestore

解决方案

2021 年 11 月 3 日更新：

React Firebase Hooks v4已经发布，它支持 v9 并且还需要 React 16.8.0 或更高版本以及 Firebase v9.0.0 或更高版本。

React Firebase Hooks库似乎还不支持 Firebase Modular SDK（最后一次发布于 2021 年 4 月）。您可能必须使用compat允许使用较旧的名称空间语法的版本，即使在v9.0.0+并且不具有 tree-shaking 的好处：

import firebase from 'firebase/compat/app'
import 'firebase/compat/firestore'
// import 'firebase/compat/[SERVICE_NAME]'

推荐阅读