React组件中异步数据渲染指南：解决Promise类型错误

const getUserName = async () => {
    try {
        // 假设db和auth已正确初始化
        const docRef = doc(db, "users/" + auth.currentUser?.uid);
        const userDocument = await getDoc(docRef);
        const userData = userDocument.data() as UserData;
        const userName = userData.name.split(' ')[0];
        return userName; // 返回一个字符串
    } catch (error) {
        console.error(error);
        return "Failed to Retrieve UserName";
    }
};

return (
  <div>
    Hi, {getUserName()}!
  </div>
);

import React, { useState, useEffect } from 'react';
import { doc, getDoc } from 'firebase/firestore'; // 假设你已导入Firebase相关模块
import { auth, db } from './firebaseConfig'; // 假设你已导入Firebase配置

// 定义UserData接口，确保类型安全
interface UserData {
  name: string;
  // ...其他用户数据字段
}

const MyComponent: React.FC = () => {
  // 1. 使用useState来存储用户名，初始值为空字符串
  const [userName, setUserName] = useState<string>('');
  // 也可以添加一个加载状态，提供更好的用户体验
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  // 2. 使用useEffect来执行异步数据获取
  useEffect(() => {
    const fetchUserName = async () => {
      setIsLoading(true); // 开始加载
      setError(null);    // 清除之前的错误
      try {
        // 确保auth.currentUser?.uid存在，否则无法获取用户文档
        if (auth.currentUser?.uid) {
          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); // 更新userName状态
          } else {
            setUserName("User Not Found");
          }
        } else {
          setUserName("No User Logged In");
        }
      } catch (err) {
        console.error("Error fetching user name:", err);
        setError("Failed to Retrieve UserName"); // 设置错误信息
        setUserName("Error"); // 在UI中显示错误提示
      } finally {
        setIsLoading(false); // 结束加载
      }
    };

    fetchUserName(); // 在组件挂载后立即执行数据获取
  }, []); // 依赖项数组为空，表示只在组件挂载时运行一次

  // 3. 在渲染逻辑中直接使用userName状态变量
  if (isLoading) {
    return <div>Loading user name...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div>
      Hi, {userName || 'Guest'}! {/* 如果userName为空，显示Guest */}
    </div>
  );
};

export default MyComponent;