React Native Firebase db.collection is not a function报错解决

db.collection is not a function 报错只有两类触发场景：

1. 你安装的是v9及以上版本的Firebase JS SDK（Expo默认拉取的最新版Firebase均为该版本），却使用了v8及更早版本的命名空间式API调用，模块化版本的SDK不会在Firestore实例上直接挂载collection方法。
2. 你在firebase.js中导出的db不是正确初始化的Firestore实例，比如漏调用初始化方法、导出错了对象、导入路径错误。

第一步：修正Firebase初始化配置 #

打开你的firebase.js，替换为模块化SDK的标准初始化写法，确保导出正确的Firestore实例：

// firebase.js
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

// 填入你自己的Firebase项目配置
const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

// 初始化Firebase应用
const app = initializeApp(firebaseConfig);
// 初始化Firestore并导出，不要使用旧版firebase.firestore()写法
export const db = getFirestore(app);

如果你坚持要用旧版链式调用写法，可以走compat兼容路径，但不推荐，会显著增加打包体积：

// 兼容写法（不推荐）
import firebase from "firebase/compat/app";
import "firebase/compat/firestore";

const app = firebase.initializeApp(firebaseConfig);
export const db = firebase.firestore();

第二步：修正活动页数据查询与渲染逻辑 #

模块化SDK的查询逻辑不再支持db.collection('events')的链式调用，需要单独导入查询方法，传入db实例调用。参考实现如下：

// EventsPage.js
import { useEffect, useState } from "react";
import { View, Text, FlatList, ActivityIndicator } from "react-native";
// 导入Firestore需要的查询方法
import { collection, getDocs } from "firebase/firestore";
// 导入你初始化好的db实例，注意替换成项目里的实际文件路径
import { db } from "./firebase";

export default function EventsPage() {
  const [events, setEvents] = useState([]);
  const [loading, setLoading] = useState(true);

  // 页面挂载时拉取数据，不要把异步请求直接写在组件渲染函数里，会触发死循环
  useEffect(() => {
    const fetchEvents = async () => {
      try {
        // 获取events集合引用
        const eventsCollection = collection(db, "events");
        // 拉取集合下所有文档快照
        const snapshot = await getDocs(eventsCollection);
        // 组装数据，带上文档id方便后续跳转、更新等操作
        const eventList = snapshot.docs.map(doc => ({
          id: doc.id,
          ...doc.data()
        }));
        setEvents(eventList);
      } catch (error) {
        console.log("活动数据拉取失败：", error);
      } finally {
        setLoading(false);
      }
    };

    fetchEvents();
  }, []);

  // 加载态
  if (loading) {
    return <ActivityIndicator size="large" style={{ flex: 1 }} />;
  }

  return (
    <View style={{ flex: 1, padding: 16 }}>
      <FlatList
        data={events}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={{ padding: 12, borderBottomWidth: 1, borderBottomColor: "#eee" }}>
            {/* 字段名替换成你Firestore中实际存储的字段即可 */}
            <Text style={{ fontSize: 16, fontWeight: "600" }}>{item.title}</Text>
            <Text style={{ color: "#666", marginTop: 4 }}>{item.activityTime}</Text>
            <Text style={{ marginTop: 4 }}>{item.description}</Text>
          </View>
        )}
      />
    </View>
  );
}

• 不要同时混用模块化SDK和compat兼容包的导入路径，会出现实例不匹配问题。
• Firestore集合名大小写敏感，确认控制台中集合名确实为events，不要拼错。
• 开发阶段如果报权限错误，先临时调整Firestore安全规则放开读权限，上线前必须按业务权限收紧规则，禁止长期开放全量读写。
• 如果需要做实时数据监听，把getDocs换成onSnapshot即可，记得在useEffect的返回值里取消监听避免内存泄漏。

内容的提问来源于stack exchange，提问作者suchafoool