如何在Firebase V9中为onSubmit函数实现实时数据连接及代码改造？

一、适配 onSubmit 函数到 Firebase V9 #

Firebase V9 采用模块化API，需先导入对应方法再重构代码：

1. 初始化Firebase并导入模块 #

// 导入Firebase核心及Firestore模块
import { initializeApp } from "firebase/app";
import { getFirestore, collection, addDoc, serverTimestamp } from "firebase/firestore";

// 替换为你的Firebase配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// 初始化应用并获取Firestore实例
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

2. 重构后的onSubmit函数 #

const onSubmit = async (formData) => {
  console.log(formData);
  try {
    // 使用addDoc替代V8的collection().add()
    await addDoc(collection(db, 'emails'), {
      to: formData.to,
      subject: formData.subject,
      message: formData.message,
      timestamp: serverTimestamp()
    });
    dispatch(closeSendMessage());
  } catch (error) {
    console.error("添加邮件记录失败:", error);
    // 可在此添加错误提示逻辑
  }
};

二、建立实时数据连接（监听集合变化） #

若需实时监听emails集合的新增、修改、删除操作，使用onSnapshot方法：

import { onSnapshot } from "firebase/firestore";

// 监听emails集合的实时变化
const unsubscribe = onSnapshot(collection(db, 'emails'), (snapshot) => {
  snapshot.docChanges().forEach((change) => {
    switch(change.type) {
      case "added":
        console.log("新增邮件:", { id: change.doc.id, ...change.doc.data() });
        break;
      case "modified":
        console.log("修改邮件:", { id: change.doc.id, ...change.doc.data() });
        break;
      case "removed":
        console.log("删除邮件:", { id: change.doc.id, ...change.doc.data() });
        break;
    }
  });
});

// 组件卸载时取消监听，避免内存泄漏
// useEffect(() => {
//   return unsubscribe;
// }, []);

核心差异说明 #

• V9采用模块化导入，需明确导入单个方法（如addDoc、serverTimestamp），不再使用V8的命名空间调用方式
• addDoc配合collection()方法替代V8的db.collection().add()写法
• 实时监听仍使用onSnapshot，但需单独导入该方法
• 异步操作建议用async/await配合try/catch捕获错误

内容的提问来源于stack exchange，提问作者Priyanshu Pandey