连接Firebase时报TypeError: Object(...) is not a function错误如何解决？

• 优先检查./firebase配置文件的导出是否符合v9+ SDK的初始化规范，参考正确写法：

// firebase.js 完整示例
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

// 替换为你的Firebase项目实际配置
const firebaseConfig = {
  apiKey: "你的项目apiKey",
  authDomain: "你的项目authDomain",
  projectId: "你的项目projectId",
  storageBucket: "你的项目storageBucket",
  messagingSenderId: "你的项目messagingSenderId",
  appId: "你的项目appId"
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export default db;

• 修复变量命名冲突问题：你已从Firebase包全局导入doc方法，数组遍历的回调参数不要复用doc命名，避免作用域覆盖导致类型错误：
  将原有逻辑中的
  setMessages(querySnapshot.docs.map(doc => doc.data()))
  修改为
  setMessages(querySnapshot.docs.map(docItem => docItem.data()))
• 补充useEffect的订阅清理逻辑：onSnapshot会返回取消订阅的方法，需要在组件卸载时调用，避免组件销毁后触发状态更新报错，修改后的useEffect完整代码如下：

useEffect(()=>{
  const q = query(collection(db,"messages"));
  const unsubscribe = onSnapshot(q,(querySnapshot)=>{
    setMessages(querySnapshot.docs.map(docItem => docItem.data()))
  })
  return () => unsubscribe()
},[])

如果完成以上修改后仍有报错，可打印db变量确认是否为undefined，如果为undefined则是Firebase初始化流程存在问题，可检查配置参数是否正确、初始化顺序是否早于db导出。

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