React Native Firebase首次加载无法获取状态问题求助

问题根源 #

1. 初始状态不匹配：你把groupInfo初始化为数组[]，但实际从Firebase获取的是包含members数组的对象，导致初始渲染时groupInfo['members']为undefined，调用map就会报错。
2. 数据加载异步：组件渲染时数据还没获取完成，直接访问members会触发未定义错误。

具体修复步骤 #

1. 修正初始状态 #

把groupInfo的初始值从数组改为空对象，和后续获取的数据结构保持一致：

const [groupInfo, setGroupInfo] = useState({});
// 可选：如果需要默认members为空数组，可以这样
// const [groupInfo, setGroupInfo] = useState({ members: [] });

2. 安全渲染数组 #

有两种方式避免访问undefined的members：

• 方式一：使用可选链操作符
  直接在map前加?.，当members不存在时不会执行map：

{
  groupInfo.members?.map((memberName, index) =>
    <View key={index} style={styles.member}>
      <Text style={styles.memberText}>{memberName}</Text>
    </View>
  )
}

注意：给列表项加上key属性，符合React的列表渲染规范

• 方式二：添加加载判断
  如果需要显示加载状态，可以先判断数据是否加载完成：

{
  !groupInfo.members ? (
    <Text>加载中...</Text>
  ) : (
    groupInfo.members.map((memberName, index) =>
      <View key={index} style={styles.member}>
        <Text style={styles.memberText}>{memberName}</Text>
      </View>
    )
  )
}

3. 优化useEffect的异步代码（可选） #

混合await和then/catch的写法不够清晰，改成try/catch更易维护：

useEffect(() => {
  async function getGroupData() {
    try {
      // 获取用户文档
      const userSnapshot = await getDoc(doc(db, 'users', email));
      if (!userSnapshot.exists()) {
        console.log('No user with that email exists!');
        return;
      }
      const groupCode = userSnapshot.data().group_code;

      // 获取群组文档
      const groupSnapshot = await getDoc(doc(db, 'groups', groupCode));
      if (!groupSnapshot.exists()) {
        console.log('No group with that code exists!');
        return;
      }
      setGroupInfo(groupSnapshot.data());
    } catch (err) {
      console.log(err);
    }
  }

  getGroupData();
}, [email]);

额外建议 #

如果members可能不存在于群组数据中，建议在设置groupInfo时给members设置默认空数组，避免后续渲染问题：

setGroupInfo({ ...groupSnapshot.data(), members: groupSnapshot.data().members || [] });

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