从Firebase实时数据库中选择React下拉菜单(Formik + materialUI)

import React, { useEffect, useState } from 'react';
import { Formik, Form, Field } from 'formik';
import { Select, MenuItem, Button } from '@material-ui/core';
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 database = firebase.database();

const MyForm = () => {
  const [options, setOptions] = useState([]);

  useEffect(() => {
    // 从Firebase实时数据库获取下拉菜单选项
    const fetchData = async () => {
      const snapshot = await database.ref('options').once('value');
      const data = snapshot.val();
      setOptions(data);
    };

    fetchData();
  }, []);

  const handleSubmit = (values) => {
    // 处理表单提交
    console.log(values);
  };

  return (
    <Formik initialValues={{ option: '' }} onSubmit={handleSubmit}>
      <Form>
        <Field name="option" as={Select}>
          {options.map((option) => (
            <MenuItem key={option.id} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
        </Field>
        <Button type="submit">提交</Button>
      </Form>
    </Formik>
  );
};

export default MyForm;