React Native中如何从Firebase getDoc()方法获取变量值并渲染使用

你需要通过状态存储拉取到的用户数据，同时修正useEffect异步写法的潜在问题，再按要求渲染字段即可，完整实现代码如下：

// 顶部导入依赖
import { useState, useEffect } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import { doc, getDoc } from 'firebase/firestore';
import { db } from './你的firebase配置文件路径'; // 替换为自身项目的firebase配置引入路径

const UserProfilePage = () => {
  // 声明状态存储用户数据，初始值为null
  const [userProfile, setUserProfile] = useState(null);

  useEffect(() => {
    // 不要直接给useEffect传async函数，单独声明异步方法内部调用
    const fetchUserData = async () => {
      // 增加user存在性判断，避免uid不存在时报错
      if (!user?.uid) return;
      const docRef = doc(db, "users", user.uid);
      const docSnap = await getDoc(docRef);

      if (docSnap.exists()) {
        const data = docSnap.data();
        // 把完整数据存入状态供渲染使用
        setUserProfile(data);
      } else {
        console.log("No such document!");
      }
    };

    fetchUserData();
  }, [user?.uid]); // 依赖数组添加user.uid，仅当uid变化时重新拉取数据，避免无限执行

  // 数据未加载完成时展示加载态
  if (!userProfile) {
    return <Text>加载中...</Text>;
  }

  return (
    <View style={styles.container}>
      <Text>name is : {userProfile.displayName}</Text>
      <Text>age is : {userProfile.age}</Text>
      <Text>gender is : {userProfile.gender}</Text>
      <Text>photo is : {userProfile.photo}</Text>
      <Text>job is : {userProfile.job}</Text>
      {/* Image组件必须指定宽高才能正常渲染网络图片 */}
      <Image 
        source={{ uri: userProfile.photo }}
        style={styles.avatar}
        resizeMode="cover"
      />
    </View>
  );
};

// 基础样式配置
const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
  avatar: {
    width: 100,
    height: 100,
    borderRadius: 50, // 如需圆形头像可保留该属性
    marginTop: 12,
  }
});

export default UserProfilePage;

注意事项 #

• 代码中的user变量如果是从授权状态、全局上下文获取的，请确保它的作用域可在当前组件正常访问
• 可根据自身UI需求调整样式、字段展示顺序

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