Firebase 错误 - 调用 Firebase App.initializeApp() -

Question

我在 React 中遇到 Firebase 问题。它显示“Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).”错误。我在网站的另一个页面上工作，一切正常，我重新加载页面，突然出现错误。我没有更改与 firebase 相关的任何内容。我正在查看其他问题，但没有解决问题。使用 firebase 的子页面是白色的，那里什么都没有，但没有 firebase 的其他子页面运行良好。 This is the screenshot.

代码下方：

import { getDatabase, ref, set, onValue} from "firebase/database";
import {uid} from "uid";

let animals = [];
const Care= () => {
    const uuid = uid();
    const [name,setName] = useState("");
    const [type,setType] = useState("");
    const [sex,setSex] = useState("");
    const [age,setAge] = useState("");
    const [story,setStory] = useState("")
    const [photo,setPhoto] = useState("")
    const [animalId,setAnimalId] = useState("")
    const [from, setFrom] = useState("")
    const [to, setTo] = useState("")


const handleSubmit = (e) => {
    e.preventDefault();

    set(ref(db, `/Care/${uuid}`), {
        name: name,
        type: type,
        sex: sex,
        age: age,
        story: story,
        photo: photo,
        from:from,
        to:to,
        id:uuid

    }).then(() =>{
        alert("Udało się! Zwierzak został dodany!")
    })
        setName("")
        setType("")
        setSex("")
        setAge("")
        setStory("")
        setPhoto("")
        setAnimalId("")
    }


    const db = getDatabase();
    const starCountRef = ref(db, `/Care`);
    onValue(starCountRef, (snapshot) => {
        let data = snapshot.exportVal();
        animals = [];
        
        Object.keys(data).map((id) => {
        animals.push(data[id])
        })
    });

    

    return (
        <>
            <div className="care-header">
                <div className="header-content">
                    <h1 className="header-title">Znajdź opieke dla zwierzaka!</h1>

                </div>
            </div>
            <div className="form-wrapper-care">
                <h3 className="form-title">Infomacje o zwierzaku </h3>
                <form action="" className="form" onSubmit={handleSubmit}>
                    <input
                        className="default-input"
                        type="text"
                        placeholder="Imię"
                        defaultValue={name}
                        onChange={(e) => setName(e.target.value)}
                    />
                    <select
                        className="select-input"
                        name=""
                        id=""
                        defaultValue={type}
                        onChange={(e) => setType(e.target.value)}
                    >

                        <option value="Wybierz gatunek">Wybierz gatunek</option>
                        <option value="Pies">Pies</option>
                        <option value="Kot">Kot</option>
                        <option value="Gryzoń">Gryzoń</option>
                        <option value="Gad">Gad</option>
                        <option value="Ptak">Ptak</option>
                    </select>
                    <select
                        className="select-input"
                        name=""
                        id=""
                        defaultValue={sex}
                        onChange={(e) => setSex(e.target.value)}
                    >
                        <option value="sex">Wybierz płeć</option>
                        <option value="Samiec">Samiec</option>
                        <option value="Samica">Samica</option>

                    </select>
                    <input
                        className="default-input"
                        type="text"
                        placeholder="Wiek"
                        defaultValue={age}
                        onChange={(e) => setAge(e.target.value)}
                    />

                    <textarea
                        className="textarea-input"
                        defaultValue={story}
                        cols="30"
                        rows="10"
                        placeholder="Tu wpisz choroby zwierzaka oraz jego historię."
                        onChange={(e) => setStory(e.target.value)}
                    />

                    <input
                        placeholder="Wrzuć link do zdjęcie zwierzaka"
                        className="default-input"
                        name="photo"
                        type="text"
                        defaultValue={photo}
                        onChange={(e) => setPhoto(e.target.value)}
                    />
                    <div>
                        <label className="date-label" htmlFor="">Od:
                            <input
                                type="date"
                                className="date-input"
                                defaultValue={from}
                                onChange={(e) => setFrom(e.target.value)}
                            />
                        </label>
                        <label htmlFor="" className="date-label">Do:
                            <input
                                type="date"
                                className="date-input"
                                defaultValue={to}
                                onChange={(e) => setTo(e.target.value)}
                            />
                        </label>
                    </div>



                    <button className="submit-button-care">Szukaj opieki</button>
                    
                </form>


            </div>
            <div className="adoption-cards-care container">
                <h3 className="care-title">Szukam opieki</h3>
                <ul className="cards-list">
                    {
                        Object.keys(animals).map((id) => {
                            return (
                                <li key={animals[id].id} className="card-item">
                                    <div className="card">
                                        <div className="photo-container">
                                            <img src={animals[id].photo} alt="animal-photo" className="animal-photo"/>
                                        </div>
                                        <div className="animal-info">
                                            <p>
                                                <span>Imię:</span>{animals[id].name}
                                            </p>
                                            <p>
                                                <span>Gatunek:</span>{animals[id].type}
                                            </p>
                                            <p>
                                                <span>Płeć:</span>{animals[id].sex}
                                            </p>
                                            <p>
                                                <span>Wiek:</span>{animals[id].age}
                                            </p>
                                            <p className="date-info">
                                               <span>Od:</span>  {animals[id].from}

                                            </p>
                                            <p className="date-info">
                                                <span>Do:</span>  {animals[id].to}
                                            </p>
                                        </div>
                                        <div className="animal-description">
                                            <p className="description-title">Opis:</p>
                                            <p className="animal-story">{animals[id].story}</p>
                                            <button className="care-btn">Opiekuj się</button>

                                        </div>

                                    </div>

                                </li>
                            )
                        })
                    }
                </ul>
            </div>

        </>

    );
}


export default Care;

和 firebase 配置：


import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import {getAuth} from "firebase/auth"
import {getDatabase} from "firebase/database";

const firebaseConfig = {
        apiKey: "X",
        authDomain: "X",
        databaseURL: "X",
        projectId: "X",
        storageBucket: "X",
        messagingSenderId: "X",
        appId: "X",
        measurementId: "X"
};

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
export const db = getDatabase(app);
export const auth = getAuth(app);

Answer 1

尝试从 compat

导入 Firebase

& 仅导出数据库

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

const firebaseConfig = {
  apiKey: "X",
  authDomain: "X",
  projectId: "X",
  storageBucket: "X",
  messagingSenderId: "X",
  appId: "X",
  measurementId: "X"
};
const db = firebase.initializeApp(firebaseConfig);

export default db;

在另一端导入数据库和您想要使用的应用程序

import db from './db';
import { getAuth, signInWithEmailAndPassword } from 'firebase/auth'

Firebase 错误 - 调用 Firebase App.initializeApp() -

Firebase error - call Firebase App.initializeApp() -

javascript

firebase

reactjs