使用动态变量作为firebase元素Reactjs

import firebase from 'firebase/app';
import 'firebase/database';

// 初始化Firebase应用
const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  databaseURL: 'YOUR_DATABASE_URL',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID',
};

firebase.initializeApp(firebaseConfig);

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

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

  useEffect(() => {
    // 读取数据
    const fetchData = async () => {
      const snapshot = await firebase.database().ref('path/to/data').once('value');
      const value = snapshot.val();
      setData(value);
    };

    fetchData();

    // 监听数据变化
    const dataRef = firebase.database().ref('path/to/data');
    dataRef.on('value', (snapshot) => {
      const value = snapshot.val();
      setData(value);
    });

    // 清除监听
    return () => {
      dataRef.off();
    };
  }, []);

  // 渲染数据
  return <div>{data}</div>;
};

export default MyComponent;