如何转换Firebase Realtime Database查询结果为可读格式并访问数据？

问题描述 #

我用JavaScript从Firebase Realtime Database获取数据时，控制台打印出的是查询元数据（内容类似：Xs {_repo: Ts, _path: Me, _queryParams: jt, _orderByCalled: true}...）。想知道如何将结果转换为可读格式，或者如何访问数据的各个子节点与对应值？

我使用的代码 #

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};

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

// 创建查询对象，但未实际获取数据
var test = query(ref(db, "/Donors"), orderByValue(), limitToFirst(3))

console.log(test)

（因尚未设置安全规则，已移除配置详情）

数据库结构 #

Donors: {
  "John Smith": {
    "firstName": "John",
    "lastName": "Smith"
  },
  "Jack Smith": {
    "firstName": "Jack",
    "lastName": "Smith"
  },
  "Jeff Smith": {
    "firstName": "Jeff",
    "lastName": "Smith"
  },
  "Josh Smith": {
    "firstName": "Josh",
    "lastName": "Smith"
  }
}

解决方法 #

你现在打印的test只是查询配置对象，并没有实际从数据库拉取数据。要获取并处理数据，需要使用Firebase提供的get()（一次性获取）或onValue()（实时监听）方法：

1. 一次性获取数据（适用于只需要加载一次的场景） #

使用get()方法执行查询，通过快照（Snapshot）对象获取数据：

const testQuery = query(ref(db, "/Donors"), orderByValue(), limitToFirst(3));

// 执行查询并获取数据
get(testQuery)
  .then((snapshot) => {
    if (snapshot.exists()) {
      // 将快照转换为可读的JavaScript对象
      const donorsData = snapshot.val();
      console.log("可读格式数据：", donorsData);

      // 访问单个子节点示例
      console.log("John Smith的firstName：", donorsData["John Smith"].firstName);

      // 遍历所有子节点
      Object.entries(donorsData).forEach(([key, value]) => {
        console.log(`捐赠者名称：${key}，姓名：${value.firstName} ${value.lastName}`);
      });
    } else {
      console.log("该路径下无数据");
    }
  })
  .catch((error) => {
    console.error("获取数据失败：", error);
  });

2. 实时监听数据变化（适用于需要实时同步数据的场景） #

使用onValue()方法监听数据变化，每次数据更新都会触发回调：

const testQuery = query(ref(db, "/Donors"), orderByValue(), limitToFirst(3));

// 监听数据变化
onValue(testQuery, (snapshot) => {
  if (snapshot.exists()) {
    const donorsData = snapshot.val();
    console.log("实时更新的数据：", donorsData);

    // 用快照的forEach方法遍历子节点（保留节点键名）
    snapshot.forEach((childSnapshot) => {
      const childKey = childSnapshot.key;
      const childData = childSnapshot.val();
      console.log(`捐赠者：${childKey}，姓名：${childData.firstName} ${childData.lastName}`);
    });
  } else {
    console.log("该路径下无数据");
  }
}, (error) => {
  console.error("监听数据失败：", error);
});

关键说明 #

• snapshot.val()：将Firebase的快照对象转换为普通JavaScript对象，直接即可读取和操作。
• 如果需要保留每个子节点的键名（比如示例中的"John Smith"），使用snapshot.forEach()遍历会更方便，或者用Object.entries()处理val()返回的对象。

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