React Native+Firebase 8.2.3：按用户Agency获取备忘录失败求助

核心问题 #

1. 请求顺序错误：fetchPosts 在 userData 未加载完成时就执行，此时 userData 为 null，访问 userData.agency 直接报错，导致无法获取机构备忘录数据。
2. 字段名大小写不匹配：你提到 users 集合的字段是Agency（首字母大写），但原代码用的是userData.agency（小写），这会导致无法正确读取机构名称。
3. 异步逻辑混乱：同时混用 async/await 和 .then() 写法，时序控制不清晰，容易引发错误。
4. 加载状态管理不当：loading 状态未根据请求进度正确更新，可能导致页面卡顿或加载状态异常。

修复步骤 #

1. 合并请求逻辑，保证执行顺序 #

将用户数据获取和备忘录请求合并为一个异步函数，确保只有拿到用户数据后，才发起对应机构的备忘录请求。

2. 统一异步写法 #

全程使用 async/await 处理异步操作，提升代码可读性和时序可控性。

3. 修正字段名匹配问题 #

严格对应 users 集合中的Agency字段名，避免大小写错误导致的数据读取失败。

4. 优化状态管理 #

• 将 posts 初始化为空数组，避免后续渲染时的空值判断问题
• 在请求开始时设置 loading 为 true，请求结束（无论成功失败）后设为 false

修改后的完整代码 #

const HomeScreen = ({navigation}) => {
  const {user} = useContext(AuthContext);
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [deleted, setDeleted] = useState(false);
  const [userData, setUserData] = useState(null);
  
  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        // 1. 获取用户数据
        const userDoc = await firestore()
          .collection('users')
          .doc(user.email)
          .get();
        
        if (!userDoc.exists) {
          console.error('未找到用户数据');
          return;
        }
        
        const data = userDoc.data();
        setUserData(data);
        
        // 2. 校验机构字段是否存在
        if (!data.Agency) {
          console.error('用户未设置所属机构');
          return;
        }
        
        // 3. 获取对应机构的备忘录
        const postsQuery = await firestore()
          .collection(data.Agency)
          .orderBy('postTime', 'desc')
          .get();
        
        const postList = postsQuery.docs.map(doc => {
          const { userId, post, postImg, postTime, likes, comments } = doc.data();
          return {
            id: doc.id,
            userId,
            userName: 'Test Name',
            userImg: 'omitted',
            postTime,
            post,
            postImg,
            liked: false,
            likes,
            comments,
          };
        });
        
        setPosts(postList);
      } catch (error) {
        console.error('数据请求失败:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [user.email]);

  // 加载状态渲染
  if (loading) {
    return <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
      <Text>加载中...</Text>
    </View>;
  }

  // 备忘录列表渲染（根据你的UI需求补充）
  return (
    <FlatList
      data={posts}
      keyExtractor={item => item.id}
      renderItem={({item}) => (
        <View style={{padding:16, borderBottomWidth:1, borderBottomColor:'#eee'}}>
          <Text>{item.post}</Text>
          <Text style={{color:'#999', marginTop:8}}>{item.postTime}</Text>
        </View>
      )}
    />
  );
};

额外注意事项 #

• 卡顿缓解：合并请求后减少了不必要的异步触发和组件重渲染，能有效改善页面卡顿问题。
• 调试建议：可以在关键步骤添加日志，比如打印data.Agency确认机构名称是否正确，打印postList确认备忘录数据是否正常获取。

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