Firebase实时数据库报错：Web应用白屏及app/no-options问题排查

问题分析 #

控制台抛出的Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options)错误，核心原因是未完成Firebase App的初始化就直接调用数据库服务，同时你的配置文件存在两处关键问题：

• Firebase配置信息为空未填充
• 未导出初始化好的数据库实例供组件调用

分步解决方案 #

1. 补全Firebase配置并导出数据库实例 #

打开Firebase控制台，进入你的项目「设置」→「应用」→「SDK设置和配置」，复制完整的firebaseConfig代码，替换配置文件中的空字段，并导出初始化后的数据库实例：

import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";

// 从Firebase控制台复制的完整配置内容
const firebaseConfig = {
  apiKey: "你的项目apiKey",
  authDomain: "你的项目authDomain",
  databaseURL: "你的项目databaseURL",
  projectId: "你的项目projectId",
  storageBucket: "你的项目storageBucket",
  messagingSenderId: "你的项目messagingSenderId",
  appId: "你的项目appId",
  measurementId: "你的项目measurementId"
};

const app = initializeApp(firebaseConfig);
// 导出数据库实例，供其他组件导入使用
export const database = getDatabase(app);

2. 修改App.js，使用已初始化的数据库实例 #

不要直接调用getDatabase()，而是导入配置好的数据库实例，同时修复数据渲染逻辑避免报错：

import React, { useState, useEffect } from 'react';
import Card from './components/Card/card';
import './App.css';
// 导入配置文件中导出的数据库实例（注意路径要和你的配置文件位置匹配）
import { database } from './firebase-config';
import { ref, onValue } from "firebase/database";

function App() {
  // 初始状态设为null，避免空数组/对象直接map报错
  const [data, setData] = useState(null);

  useEffect(() => {
    const dbRef = ref(database, 'main');
    // 订阅数据变化，同时添加错误处理
    const unsubscribe = onValue(dbRef, (snapshot) => {
      const fetchedData = snapshot.val();
      // 若数据库返回的是对象，转为数组适配map渲染（根据你的数据结构调整）
      if (fetchedData) {
        const dataArray = Object.values(fetchedData);
        setData(dataArray);
      } else {
        setData([]);
      }
    }, (error) => {
      console.error('数据库读取失败:', error);
    });

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

  return (
    <>
      <nav>
        <ul className="horizontal-menu">
          <li className="horizontal-menu-item"><a href="#home">Home</a></li>
          <li className="horizontal-menu-item"><a href="#about">About</a></li>
          <li className="horizontal-menu-item"><a href="#services">Services</a></li>
          <li className="horizontal-menu-item"><a href="#contact">Contact</a></li>
        </ul>
      </nav>
      <div>
        {/* 先判断数据存在再渲染，避免map报错 */}
        {data ? (
          data.map((item, index) => (
            <Card
              key={index} // 添加唯一key属性，消除React警告
              title={item.Title}
              image={item.Image_URL}
              discription={item.discription}
            />
          ))
        ) : (
          <p>加载中...</p>
        )}
      </div>
    </>
  );
}

export default App;

3. 额外检查项 #

• 确保Firebase Realtime Database的安全规则允许读取（开发阶段可临时设为{ "rules": { ".read": true, ".write": true } }，上线后需调整为严格的权限规则）
• 确认配置文件的导入路径正确，App.js中的./firebase-config要和你的配置文件实际位置一致

内容的提问来源于stack exchange，提问作者Pedro Barradas