反应网站未加载 firebase。我究竟做错了什么？答案

【问题标题】：react website not loading with firebase. What am I doing wrong?反应网站未加载 firebase。我究竟做错了什么？
【发布时间】：2022-11-29 15:01:31
【问题描述】：

我在网上查看了有关如何修复 firebase 的建议，但没有用。我尝试将我的 firebase.json 托管功能设置为“公共”到“构建”，但这没有用，所以我还应该做什么？我编译它时没有出错，但是当我运行“npm start”时网站是空白的。这是相关的javascript代码：

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

const firebaseApp = firebase.initializeApp({ 
    apiKey: "AIzaSyBl_kNHH8oIn17VrR2mcKQqOn3eAZo-Osw",
    authDomain: "instagram-clone-react-82ab7.firebaseapp.com",
    projectId: "instagram-clone-react-82ab7",
    storageBucket: "instagram-clone-react-82ab7.appspot.com",
    messagingSenderId: "562669348604",
    appId: "1:562669348604:web:ae6a7cee3832803e761979",
    measurementId: "G-6PENZ2M8LS"
});

const db = firebaseApp.firestore();
const auth = firebase.auth();
const storage = firebase.storage();

export { db, auth, storage };

export default db;

App.js文件代码：

import React, { useState, useEffect } from 'react';
import './App.css';
import Post from './Post';
import { db } from './firebase';

function App() {
  const [posts, setPosts] = useState([]);
  
  //useEffect: Runs a piece of code based on a specific condition

  useEffect(() => {
    //this is where the code runs
    db.collection('posts').onSnapshot(snapshot => {
      //Everytime a new post is added, this line of code activates
      setPosts(snapshot.docs.map(doc => doc.data()))
    })   //"posts" inside of firebase also everytime a document gets modified inside of post it takes a screenshot

  }, [] );   //conditions go here and there just variables 



  return (
    <div className="App">

      <div className="app__header">
        <img 
          className="app__headerImage"
          src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png" 
          alt="instagram_text"
        />
      </div>

      <h1>Hello clever programmers let's build a react app!!!</h1>
      
      {
        posts.map(post => (
          <Post username={post.username} caption={post.caption} imageUrl={post.imageUrl} />
        ))
      }
    </div>
  );
}

export default App;

浏览器错误：

【问题讨论】：

空白页面意味着检查浏览器控制台是否有错误
@Phil 我刚刚拍摄了浏览器控制台错误的快照。你知道这是什么意思吗？

标签： javascript node.js reactjs firebase firebase-realtime-database

【解决方案1】：

问题是你没有导入火力地堡存储.

要修复它，只需在导入 firebase/compat/app 后添加 import 语句，如下所示。

import firebase from "firebase/compat/app";

// After you import app...
import "firebase/compat/storage";

现在，当您使用.ref() 调用下面的函数时，它应该可以正常工作。

const storage = firebase.storage().ref();

【讨论】：

它起作用了，我也保留了“ref”功能。
我在网上看到另一个解决方案，但我不知道它是否有效，但他们要我下载 google-cloud storage 而不是 firebase storage 因为它效果更好，但我不知道。告诉我你的想法。我这里有链接：stackoverflow.com/questions/41352150/…
好的，我在答案中添加了ref。
切换数据库是一项艰巨的任务；更容易找到当前解决方案。

【解决方案2】：

你找到答案了吗？因为我也面临相同代码的相同问题，这是来自 instagram c 的代码

【讨论】：

哈迪，请不要添加我也是作为答案。它实际上并没有提供问题的答案。如果您有不同但相关的问题，请ask它（如果它有助于提供上下文，请参考此问题）。如果你对这个具体问题感兴趣，你可以upvote它，留下comment，或者一旦你有足够的reputation就开始bounty。

【解决方案3】：

尝试使用

const storage = firebase.storage().ref();

代替

const storage = firebase.storage();

【讨论】：

它没有用。