如何用JavaScript从Firebase打印数据键？React Native开发求助

我正在学习Firebase，查阅了官方文档并观看YouTube教程，尝试从Firebase数据库打印数据键和数据内容，最终目标是在React Native应用中展示这些数据。但目前调用console.log(collectionRef)和console.log(q)后，得到的输出是Firestore的查询/集合对象，而非实际数据：

{"_query": {"C": null, "D": null, "collectionGroup": null, "endAt": null, "explicitOrderBy": [[Ne]], "filters": [], "limit": null, "limitType": "F", "path": {"len": 1, "offset": 0, "segments": [Array]}, "startAt": null}, "converter": null, "firestore": {"app": [FirebaseAppImpl], "databaseId": [Dt], "settings": [wc]}, "type": "query"}

{"_path": {"len": 1, "offset": 0, "segments": ["users"]}, "_query": {"C": null, "D": null, "collectionGroup": null, "endAt": null, "explicitOrderBy": [], "filters": [], "limit": null, "limitType": "F", "path": {"len": 1, "offset": 0, "segments": [Array]}, "converter": null, "firestore": {"app": [FirebaseAppImpl], "databaseId": [Dt], "settings": [wc]}, "type": "collection"}

我的代码如下：

const [users, setUsers] = useState([]);

useEffect(() => {
  const collectionRef = collection(db,'users');
  const q = query(collectionRef, orderBy('nombre', 'desc'))

  console.log(collectionRef)
  console.log(q)
})

你现在的代码只是创建了集合引用和查询对象，但没有执行查询获取实际数据。Firestore需要通过getDocs（单次获取）或onSnapshot（实时监听）来获取数据。

方案1：单次获取数据（使用getDocs） #

适合只需要加载一次数据的场景：

const [users, setUsers] = useState([]);

useEffect(() => {
  const fetchUsers = async () => {
    const collectionRef = collection(db, 'users');
    const q = query(collectionRef, orderBy('nombre', 'desc'));
    // 执行查询获取数据快照
    const querySnapshot = await getDocs(q);
    // 解析快照，同时保留文档ID和数据内容
    const usersData = querySnapshot.docs.map(doc => ({
      id: doc.id,
      ...doc.data()
    }));
    setUsers(usersData);
    console.log('用户数据：', usersData);
  };

  fetchUsers();
}, []);

方案2：实时监听数据变化（使用onSnapshot） #

适合需要数据更新时自动同步到应用的场景：

const [users, setUsers] = useState([]);

useEffect(() => {
  const collectionRef = collection(db, 'users');
  const q = query(collectionRef, orderBy('nombre', 'desc'));
  // 建立实时监听，数据变化时自动触发回调
  const unsubscribe = onSnapshot(q, (querySnapshot) => {
    const usersData = querySnapshot.docs.map(doc => ({
      id: doc.id,
      ...doc.data()
    }));
    setUsers(usersData);
    console.log('实时更新的用户数据：', usersData);
  });

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

关键说明 #

• collectionRef和q只是查询的描述对象，不是数据本身，直接打印只会输出Firestore内部的对象结构。
• getDocs是异步函数，必须用async/await或.then()处理异步逻辑。
• 解析数据时，doc.id是文档的主键，doc.data()返回文档的实际字段内容，通常需要结合两者保存，方便后续操作（比如修改/删除文档）。

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