React fetch Firebase获取唯一键值

import React, { useState } from 'react';
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);

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

  const handleAddData = () => {
    const newKey = firebase.database().ref().child('data').push().key;
    const updates = {};
    updates['/data/' + newKey] = data;
    firebase.database().ref().update(updates);

    console.log('New Key:', newKey);
  };

  return (
    <div>
      <input
        type="text"
        value={data}
        onChange={(e) => setData(e.target.value)}
      />
      <button onClick={handleAddData}>Add Data</button>
    </div>
  );
};

export default App;

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}