ReactJS上传数据至Firebase数据库问题及数据库选型咨询

一、数据上传失败&跳转后未保存的问题修复 #

你的代码核心问题在于Firebase实时数据库的写入操作未等待完成就执行了页面跳转，同时需要排查配置与权限问题：

1. 修复异步逻辑 #

firebase.database().ref("Restaurant").push() 是异步操作，必须用 await 等待写入完成后再跳转，否则页面会在数据持久化前就离开，导致数据丢失。修改后的 handleSubmit 如下：

const handleSubmit = async (e) => {
  e.preventDefault();
  // 先校验图片是否选择，避免空值报错
  if (!image) {
    alert("请选择餐厅图片");
    return;
  }

  try {
    const storageRef = firebase.storage().ref();
    const imageRef = storageRef.child(`images/${image.name}.jpg`);
    await imageRef.put(image);
    const imageUrl = await imageRef.getDownloadURL();

    // 等待数据库写入完成
    await firebase.database().ref("Restaurant").push({
      name,
      city,
      location,
      phone,
      website,
      imageUrl,
    });
    
    // 写入完成后再执行页面跳转
    navigate("/restaurants");
  } catch (error) {
    // 捕获错误并输出，方便调试排查
    console.error("上传失败:", error);
    alert(`上传出错：${error.message}`);
  }
};

2. 排查Firebase基础配置 #

• 确保已在项目中正确初始化Firebase App，建议单独创建配置文件：

  import firebase from "firebase/compat/app";
  import "firebase/compat/database";
  import "firebase/compat/storage";
  
  const firebaseConfig = {
    // 替换为你的Firebase项目配置信息
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    databaseURL: "YOUR_DATABASE_URL",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
  };
  
  // 避免重复初始化
  if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig);
  }
  

• 检查实时数据库与Storage的权限规则，开发阶段可临时开放读写权限（生产环境需修改为认证用户访问）：
  • 实时数据库规则：

    {
      "rules": {
        ".read": true,
        ".write": true
      }
    }
    

  • Storage规则：

    rules_version = '2';
    service firebase.storage {
      match /b/{bucket}/o {
        match /{allPaths=**} {
          allow read, write: if true;
        }
      }
    }
    

二、Firestore是否适合餐厅详情的读写更新？ #

是的，Firestore比实时数据库更适配你的需求，核心原因：

• Firestore是文档型数据库，支持灵活的条件查询，比如直接按餐厅名称精准查询：

  // 按名称查询餐厅
  const querySnapshot = await firebase.firestore()
    .collection("restaurants")
    .where("name", "==", "目标餐厅名称")
    .get();
  

• 更新操作更直观，找到对应文档后可直接修改指定字段：

  // 更新餐厅详情
  await firebase.firestore()
    .collection("restaurants")
    .doc("餐厅文档ID")
    .update({
      city: "新城市名称",
      phone: "新联系电话"
    });
  

• 实时数据库若要按名称查询，需手动创建索引或遍历全量数据，效率较低；Firestore会自动优化查询性能，更适合结构化数据的CRUD操作。

如果你的核心需求是按名称进行读写、更新餐厅详情，建议迁移到Firestore。

内容的提问来源于stack exchange，提问作者A 17