Firebase Web v9 升级打破了 react-firebase-hooks “useCollectionData()”

极客技术

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

index.esm.js:101 Uncaught TypeError: 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().

谢谢你的帮助。

达马拉吉

阵营火力地堡鱼钩库似乎并不支持火力地堡模块化SDK,但(最后一个版本2021年4月)。您可能必须使用compat允许使用旧的命名空间语法的版本,即使在v9.0.0+并且没有 tree-shaking 的好处:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

React / Stripe / createPortalLink() 与 firebase v9

Firebase Firestore Web v9 初始化

Firebase V9 在线状态

实时数据库和 Firestore Firebase web v9 的导入查询

如何使用 reactjs 將圖像上傳到 Firebase web v9

如何在 React 中将此代码从 Firebase Firestore v8 转换为 Firebase Firestore v9 Modular

无法使用 Firebase v9 Modular React JS 读取未定义的属性(读取“indexOf”)

使用 React JS 在 Firebase v9 中创建文档时保存文档 ID

Firebase v9 onSnapShot 在異步函數中,同時在 useEffect React 中被調用

React 和 Firebase Firestore V9 上一页分页返回“第一页”

React 和 firebase v9:在 onSnapshot 上動態設置路徑不起作用

NextJS:react-firebase-hooks命令

使用 React Hooks 限制 Firebase 重新渲染

Firebase和React Hooks(useState和useEffect)

Firebase auth v9 - AuthCredential.fromJSON() 消失了

Firebase Auth v9:Object(...) 不是函数

Firebase v9,无法从嵌套集合中获取文档

(React-firebase-hooks) 如何按降序查询firebase文档

使用 Firebase v9 從網站上傳文件到 Firebase 存儲

如何从Firebase Firestore快照(React Hooks)获取对象?

React Hooks Firebase-useEffect挂钩不返回任何数据

React Hooks结合Firebase数据未在页面加载中显示

React Hooks + Firebase Firestore onSnapshot-正确使用带有React Hooks的Firestore侦听器

如何在 Firebase Modular SDK V9 中使用 setPersistence?

导入不适用于 Firebase Client v9 (npm)

Firebase 数据库 V9 返回最后一项

如何在 Node 中初始化 Firebase V9 数据库

Firebase v9 - 獲取參考文檔內容

创建用户后,Firebase v9 auth.currentUser 为空