Next.js/React项目使用useCollectionData时报v1.isEqual is not a function错误
报错触发原因
- 依赖版本不兼容:该报错90%以上场景都是
react-firebase-hooks和firebaseSDK 版本不匹配导致。Firebase v9 开始改用模块化API,将isEqual方法从顶层导出调整为firebase/firestore子路径导出,低于v5.0.0版本的react-firebase-hooks还是按照旧路径调用该方法,就会抛出找不到方法的错误。 - 入参类型错误:你传入
useCollectionData的第一个参数renderPosts不是原生的Firestore CollectionReference或者Query实例。如果你对Firestore查询对象做了自定义包装、序列化,会导致钩子内部的字段对比逻辑调用isEqual时入参异常。 - 依赖冲突:项目中存在多版本Firebase SDK共存,
react-firebase-hooks调用时错误引用了没有导出isEqual方法的版本。
对应解决办法
- 匹配依赖版本:如果你使用的是Firebase v9及以上版本,直接升级
react-firebase-hooks到最新正式版即可,执行命令:npm install react-firebase-hooks@latest - 校验查询实例:确保
renderPosts是通过Firebase官方提供的collection()、query()等原生API生成的查询实例,不要对该实例做额外的代理、序列化操作,正确的生成逻辑示例:
import { collection, query } from "firebase/firestore"; import { db } from "@/utils/firebase"; // 替换为你自己的Firebase初始化文件路径 // 生成原生查询实例 const renderPosts = query(collection(db, "posts")); // 调用钩子 const [posts, loading, error] = useCollectionData<Post>(renderPosts, { idField: "id" });
- 清理依赖缓存:如果版本匹配后还是报错,删除项目根目录的
node_modules文件夹、package-lock.json/yarn.lock/pnpm-lock.yaml锁文件后重新执行npm install,消除多版本依赖共存问题。
内容的提问来源于stack exchange,提问作者la39zz
相关产品推荐
相关产品推荐

