React Native中Firestore数据可打印控制台如何渲染到页面

你写的方法只把数据打印在控制台，数据存在.then回调的局部作用域里，没有存入React可追踪的响应式状态，无法触发页面重渲染。按以下步骤修改即可：

1. 定义响应式状态 #

在函数组件顶部引入React Hook，定义三类状态分别存储数据、控制加载态、存储错误信息：

import { useState, useEffect } from 'react';
import { View, Text, ActivityIndicator, StyleSheet } from 'react-native';
// 保留你原有db、auth的引入逻辑

const VotePage = () => {
  const [voteData, setVoteData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

2. 修改数据请求方法，写入状态 #

拿到有效文档数据后直接调用状态更新方法，补全加载、错误状态的流转逻辑，顺便修正原代码里的拼写错误（eror → error）：

const getVote = () =>{
    setLoading(true);
    setError(null);
    db.collection('PARLIMEN').doc(auth.currentUser?.email).get()
    .then((doc)=>{
      if (doc.exists){
        // *这步是触发渲染的核心*：把接口返回的数据存入响应式状态
        setVoteData(doc.data());
        console.log("document data: ", doc.data());
      }
      else{
        setVoteData(null);
        console.log('document is empty');
      }
    })
    .catch(err=>{
      setError(err.message);
      console.log('firebase error:'+err)
    })
    .finally(()=>{
      setLoading(false);
    })
  }

3. 页面加载时自动拉取数据 #

用useEffect在组件挂载、用户登录态就绪时自动触发请求，避免空值报错：

useEffect(() => {
    if(auth.currentUser?.email){
      getVote();
    }
  }, [auth.currentUser]);

4. 分状态渲染页面UI #

React会在状态更新时自动触发重渲染，只要在组件return中按不同状态返回对应UI即可，基础示例如下：

return (
    <View style={styles.container}>
      {/* 加载态显示加载指示器 */}
      {loading && <ActivityIndicator size="large" color="#2196F3" />}

      {/* 错误态显示错误提示 */}
      {error && <Text style={styles.errorTip}>加载失败：{error}</Text>}

      {/* 无数据态提示 */}
      {!loading && !error && !voteData && <Text>暂无对应投票数据</Text>}

      {/* 数据正常时渲染内容，字段名和Firestore存储的字段保持一致即可 */}
      {!loading && !error && voteData && (
        <View style={styles.card}>
          <Text style={styles.cardTitle}>我的投票信息</Text>
          <Text>国会选区：{voteData.parlimen}</Text>
          <Text>选民姓名：{voteData.nama}</Text>
          <Text>投票状态：{voteData.undi ? '已完成投票' : '未投票'}</Text>
          {/* 其余字段按照相同格式追加即可 */}
        </View>
      )}
    </View>
  )
}

// 基础样式
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#ffffff'
  },
  card: {
    padding: 16,
    borderRadius: 8,
    backgroundColor: '#f5f5f5',
    gap: 12
  },
  cardTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 8
  },
  errorTip: {
    color: '#f44336'
  }
})

export default VotePage;

注意事项 #

• 如果需要数据实时同步，把单次获取的.get()方法替换为Firestore的onSnapshot监听方法即可，回调中更新voteData的逻辑完全一致。
• 渲染字段时直接取控制台打印出的对象key即可，注意大小写不要写错。
• 参考截图：
  
  

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