React中如何将react-time-picker取值存入Firebase Firestore数据库

前置依赖安装 #

在项目根目录执行命令安装Firebase官方SDK：
npm install firebase

Firestore初始化 #

在src目录下新建firebase.config.js文件，填入Firebase控制台中你项目的配置参数，完成数据库初始化：

// src/firebase.config.js
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

// 替换为你自己的Firebase项目配置项
const firebaseConfig = {
  apiKey: "对应项目的apiKey",
  authDomain: "对应项目的authDomain",
  projectId: "对应项目的projectId",
  storageBucket: "对应项目的storageBucket",
  messagingSenderId: "对应项目的messagingSenderId",
  appId: "对应项目的appId"
};

const app = initializeApp(firebaseConfig);
// 导出Firestore实例供业务代码调用
export const db = getFirestore(app);

组件逻辑改造 #

在原有TimePicker组件的基础上引入Firestore操作方法，新增存储逻辑。以下是完整可运行的组件代码，支持点击按钮手动保存选中时间：

import React, { useState } from 'react';
import TimePicker from 'react-time-picker';
import { db } from './firebase.config';
import { collection, addDoc, serverTimestamp } from "firebase/firestore";

function MyApp() {
  const [value, onChange] = useState('10:00');
  const [isSaving, setIsSaving] = useState(false);

  const handleSaveTime = async () => {
    setIsSaving(true);
    try {
      // 集合名可根据业务需求自定义，此处示例为selected_records
      const recordCol = collection(db, "selected_records");
      await addDoc(recordCol, {
        pickTime: value, // TimePicker返回的HH:mm格式时间字符串，可直接存入
        createTime: serverTimestamp() // 可选字段，自动生成服务端时间戳，方便后续排序查询
      });
      alert('时间保存成功');
    } catch (error) {
      console.error("存储失败：", error);
      alert('保存失败，请检查权限配置与网络状态');
    } finally {
      setIsSaving(false);
    }
  };

  return (
    <div>
      <TimePicker onChange={onChange} value={value} />
      <button 
        onClick={handleSaveTime}
        disabled={isSaving}
        style={{ margin: '12px 0', padding: '6px 16px' }}
      >
        {isSaving ? '保存中' : '保存选中时间'}
      </button>
    </div>
  );
}

export default MyApp;

补充说明

• 部署前需要在Firebase控制台的Firestore页面配置正确的安全规则，本地调试阶段可以临时开启测试模式规避权限报错
• 如果需要选中时间后自动存储，不需要手动点击按钮，可以在onChange回调内加入防抖逻辑后调用handleSaveTime，避免每次时间变动都触发写入请求消耗配额
• 如果需要存储带日期的完整时间，可以在存入前自行拼接日期字段，不需要额外转换TimePicker的返回值格式

内容的提问来源于stack exchange，提问作者siddhant kumar