React网站没有加载firebase,我做错了什么?

ne5o7dgx  于 2022-11-30  发布在  React
关注(0)|答案(2)|浏览(166)

我看了网上关于如何修复firebase的建议,但是它们不起作用。我试着将我的firebase.json托管特性从"public"设置为"build",但是这不起作用,那么我还应该怎么做呢?当我编译它的时候没有错误,但是当我运行"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;

浏览器错误:

xienkqul

xienkqul1#

问题是您尚未导入 Firebase Storage
要修复此问题,只需在导入firebase/compat/app后添加import语句,如下所示。

import firebase from "firebase/compat/app";

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

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

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

7cwmlq892#

尝试使用

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

代替

const storage = firebase.storage();

相关问题