如何将异步firebase数据分配给react初始状态

import React, { useState, useEffect } from 'react';
import firebase from 'firebase/app';
import 'firebase/database';

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 异步获取Firebase数据
    const fetchData = async () => {
      const firebaseConfig = {
        // Firebase配置信息
      };
      
      // 初始化Firebase
      firebase.initializeApp(firebaseConfig);

      // 获取Firebase数据库引用
      const db = firebase.database();

      // 读取数据
      const snapshot = await db.ref('path/to/data').once('value');
      const firebaseData = snapshot.val();

      // 将数据分配给组件的初始状态
      setData(firebaseData);
    };

    fetchData();
  }, []);

  return (
    <div>
      {/* 在这里使用data */}
      {data && <p>{data}</p>}
    </div>
  );
};

export default MyComponent;