在firebase的react组件中显示用户名

npm install firebase

import firebase from 'firebase/app';
import 'firebase/auth';

const firebaseConfig = {
  // 添加你的Firebase配置信息
};

firebase.initializeApp(firebaseConfig);

import React, { useEffect, useState } from 'react';

const MyComponent = () => {
  const [username, setUsername] = useState('');

  useEffect(() => {
    const unsubscribe = firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        setUsername(user.displayName);
      } else {
        setUsername('');
      }
    });

    return () => unsubscribe();
  }, []);

  return (
    <div>
      {username ? `Welcome, ${username}!` : 'Please sign in.'}
    </div>
  );
};

export default MyComponent;