React中从Firebase数据库获取数据遇database函数错误的解决请求

问题根源 #

1. 依赖导入缺失：你需要使用Firebase Realtime Database，但firebase-config.js仅导入了Firestore，未导入Realtime Database的兼容版本。
2. API版本混用：getDatabase(app)是Firebase v9模块化API写法，与你使用的compat兼容版（firebase/compat/app）不匹配。
3. 导出结构不匹配：App.js尝试调用firebase.database()，但你导出的是包含firebase和database的对象，而非直接的Firebase实例。
4. 函数组件状态错误：函数组件无法使用this.setState，需改用useState钩子管理状态。

分步解决方案 #

1. 修正firebase-config.js #

导入Realtime Database兼容版本，正确初始化并导出实例：

import firebase from 'firebase/compat/app';
// 导入Realtime Database兼容版（若需Firestore可保留对应导入）
import "firebase/compat/database";
// import "firebase/compat/firestore"; // 无需Firestore可删除该行

const firebaseConfig = {
    // 你的Firebase配置信息
};

const app = firebase.initializeApp(firebaseConfig);
// 初始化Realtime Database实例
const database = firebase.database(app);

// 导出实例供组件使用
export default { firebase, database };

2. 修正App.js #

使用useState管理数据，正确调用数据库实例，并添加监听清理逻辑：

import React, { useEffect, useState } from "react";
import { database } from "./firebase-config"; // 直接导入数据库实例

function App() {
  // 声明状态存储数据
  const [data, setData] = useState([]);

  function databaseData() {
    const schoolsRef = database.ref("schools");
    // 监听数据变化，返回取消监听的函数
    const unsubscribe = schoolsRef.on("value", snapshot => {
      const fetchedData = [];
      snapshot.forEach(childSnapShot => {
        const schoolTitles = {
          ID: childSnapShot.key.toString(),
          Titles: childSnapShot.val().title,
        };
        fetchedData.push(schoolTitles);
      });
      // 更新状态
      setData(fetchedData);
      console.log("获取到的数据：", fetchedData);
    });
    return unsubscribe;
  }

  useEffect(() => {
    const unsubscribe = databaseData();
    // 组件卸载时取消监听，避免内存泄漏
    return () => unsubscribe();
  }, []);

  return (
    <div>
      {/* 示例：渲染获取到的数据 */}
      {data.map(school => (
        <div key={school.ID}>
          <h3>{school.Titles}</h3>
        </div>
      ))}
    </div>
  );
}

export default App;

额外说明 #

• 若无需Firestore，建议删除firebase/compat/firestore的导入，减少打包体积。
• Realtime Database的监听会持续触发，必须在组件卸载时调用unsubscribe清理监听。

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