在React组件中处理异步数据渲染的最佳实践

import React, { useState, useEffect } from 'react';
// 假设您已经配置了Firebase并导入了相关模块
// import { doc, getDoc } from 'firebase/firestore';
// import { auth, db } from './firebaseConfig'; // 示例路径

// 定义UserData接口以确保类型安全
interface UserData {
  name: string;
  // 如果还有其他用户数据字段，可以在这里添加
}

// 模拟Firebase相关对象和函数，实际项目中应从Firebase SDK导入
const auth = {
  currentUser: {
    uid: 'some_user_id_123', // 模拟当前登录用户的UID
  },
};

const db = {}; // 模拟Firestore数据库实例

const doc = (dbInstance: any, path: string) => ({
  path,
  // 模拟文档引用
});

const getDoc = async (docRef: any) => {
  // 模拟异步获取文档数据
  return new Promise<{ exists: () => boolean; data: () => UserData }>(resolve => {
    setTimeout(() => {
      if (docRef.path.includes(auth.currentUser.uid)) {
        resolve({
          exists: () => true,
          data: () => ({ name: 'John Doe' }), // 模拟获取到的用户数据
        });
      } else {
        resolve({
          exists: () => false,
          data: () => ({} as UserData),
        });
      }
    }, 1000); // 模拟网络延迟
  });
};


const MyProfileComponent: React.FC = () => {
  // 1. 使用 useState Hook 管理用户名状态
  // 初始值可以设置为“加载中...”，在数据未加载完成时显示
  const [userName, setUserName] = useState('加载中...');

  // 2. 使用 useEffect Hook 执行异步数据获取
  useEffect(() => {
    const fetchAndSetUserName = async () => {
      try {
        // 确保当前用户已登录且UID存在
        if (!auth.currentUser?.uid) {
          setUserName("访客"); // 未认证用户显示“访客”
          return;
        }

        // 构建Firestore文档引用
        // 实际应用中，auth和db应从Firebase配置中导入
        const docRef = doc(db, "users/" + auth.currentUser.uid);
        // 异步获取用户文档
        const userDocument = await getDoc(docRef);

        if (userDocument.exists()) {
          // 如果文档存在，提取用户数据并更新状态
          const userData = userDocument.data() as UserData;
          const fetchedUserName = userData.name.split(' ')[0]; // 获取名字的第一部分
          setUserName(fetchedUserName);
        } else {
          // 如果用户文档不存在，显示默认值
          setUserName("访客");
        }
      } catch (error) {
        // 捕获并处理错误
        console.error("获取用户名失败:", error);
        setUserName("获取失败"); // 错误时显示“获取失败”
      }
    };

    // 在组件挂载后调用异步函数
    fetchAndSetUserName();
  }, []); // 空依赖数组 [] 确保此 effect 只在组件挂载时运行一次

  // 3. 在渲染逻辑中使用状态变量
  return (
    <div>
      你好, {userName}!
    </div>
  );
};

export default MyProfileComponent;