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

Question

我在网上查看了有关如何修复 firebase 的建议，但没有用。我尝试将我的 firebase.json 托管功能设置为“构建”，其中显示“public”，但这没有用，我还应该做什么？我编译时没有出错，但是当我运行 “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;

浏览器错误：

Answer 1

尝试使用

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

而不是

const storage = firebase.storage();

Answer 2

问题是您尚未导入 Firebase 存储。

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

import firebase from "firebase/compat/app";

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

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

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

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

react website not loading with firebase. What am I doing wrong?

javascript

node.js

firebase

reactjs

firebase-realtime-database