React Native从Firestore取数遇错误：如何用async/await处理Promise

问题背景 #

我在开发React Native应用时，通过Firestore创建了admin-users集合：

db.collection("admin-users").add({email: "adminuseremail"})

其中db是firebase.firestore()实例。但使用以下代码获取数据时出现错误：

const snapshot = db.collection("admin-users").get();
snapshot.docs.map((doc) => doc.data());

报错信息：TypeError: Cannot read property 'map' of undefined，打印snapshot得到{"_h": 0, "_i": 0, "_j": null, "_k": null}。当前Firebase规则已设置为开放读写：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

错误原因 #

db.collection("admin-users").get()返回的是Promise对象，并非直接的查询快照。你打印的snapshot其实是未完成的Promise状态，自然不存在docs属性，调用map时就会触发错误。

正确使用async/await的方式 #

在React Native中，必须在标记为async的函数内部使用await来等待Promise完成，才能获取到真正的查询快照：

1. 在函数组件的useEffect中使用 #

import { useEffect, useState } from 'react';

function AdminUsersComponent() {
  const [adminUsers, setAdminUsers] = useState([]);

  useEffect(() => {
    // 定义内部异步函数
    const fetchAdminUsers = async () => {
      try {
        // 等待Promise完成，拿到真实的查询快照
        const snapshot = await db.collection("admin-users").get();
        // 提取文档数据
        const usersData = snapshot.docs.map(doc => doc.data());
        setAdminUsers(usersData);
      } catch (error) {
        console.error('获取数据失败:', error);
      }
    };

    fetchAdminUsers();
  }, []);

  return (
    <div>
      {adminUsers.map((user, index) => (
        <p key={index}>{user.email}</p>
      ))}
    </div>
  );
}

2. 在自定义异步工具函数中使用 #

async function getAdminUsers() {
  try {
    const snapshot = await db.collection("admin-users").get();
    return snapshot.docs.map(doc => doc.data());
  } catch (error) {
    console.error('获取数据出错:', error);
    return [];
  }
}

// 调用示例
getAdminUsers().then(users => {
  console.log('管理员用户列表:', users);
});

替代方案：使用.then()链式调用 #

如果不想用async/await，也可以通过Promise的链式调用来处理：

db.collection("admin-users").get()
  .then(snapshot => {
    const usersData = snapshot.docs.map(doc => doc.data());
    console.log('用户数据:', usersData);
    // 此处可更新组件状态或执行其他逻辑
  })
  .catch(error => {
    console.error('获取数据失败:', error);
  });

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