在一个文件中导出“firebase/storage”和“firebase/firestore” - Nextjs

Question

当我想导出我的firebase.js 文件的两个对象时遇到问题，我收到了这个错误：

TypeError: Cannot read properties of undefined (reading 'ref')

firebase.js

import firebase from "firebase";
import "firebase/storage";
import "firebase/firestore";

const firebaseConfig = {
  apiKey: ....
};
if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
} else {
  firebase.app();
}
var storage = firebase.storage();
var firestore = firebase.firestore();

export default { storage, firestore };

upload.js

  import React, { useState } from "react";
  import { storage } from "../lib/firebase";

  function account() {
    const [image, setImage] = useState("");
    const upload = () => {
      if (image == null) return;
      storage
        .ref(`/images/${image.name}`)
        ....
    };

    return (
      <div>
        <Upload />
      </div>
    );
  }

  export default account;

如果我只导出storage 并将其导入我的upload.js文件，它就可以工作。有什么不同？

Answer 1

如果您尝试按模块导入。应该是这样的。

firebase.js

import firebase from "firebase";
import "firebase/storage";
import "firebase/firestore";

const firebaseConfig = {
  apiKey: ....
};
if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
} else {
  firebase.app();
}
var storage = firebase.storage();
var firestore = firebase.firestore();

export { storage, firestore };

upload.js

import React, { useState } from "react";
  import { storage, firestore } from "../lib/firebase";

  function account() {
    const [image, setImage] = useState("");
    const upload = () => {
      if (image == null) return;
      storage
        .ref(`/images/${image.name}`)
        ....
    };

    return (
      <div>
        <Upload />
      </div>
    );
  }

  export default account;

希望能帮到你！