Question

实际上，标题或多或少是对问题的整体解释。我正在尝试在我的React应用程序中使用Firebase，它也使用NextJS，问题是我无法让存储工作。

import firebase from 'firebase'
import uuid from 'uuid/v4'

// Init
try {
  firebase.initializeApp({
    apiKey: 'apiKey',
    authDomain: 'authDomain',
    databaseURL: 'dbUrl',
    projectId: 'projID',
    storageBucket: 'storageBucket',
    messagingSenderId: 'id'
  })
} catch (err) {
  if (!/already exists/.test(err.message)) {
    console.error('Firebase initialization error', err.stack)
  }
}

console.log(firebase.app().name) // <- name

// References
const database = firebase.database()
const storage = firebase.storage().ref() // <- the problem 
const documentImageStorage = storage.child('images/')
const documentsRef = database.ref('/documents/')
const documentsRequestsRef = database.ref('/requests/')

因此，当我运行代码时，我可以确认应用程序在数据库正常工作时正常工作，并且正确返回名称（[default]），但存储引用所在的行define返回错误：

Firebase: firebase.storage() takes either no argument or a Firebase App instance. (app/invalid-app-argument).

为什么会出现这种情况的任何想法？我该如何解决？

Answer 1

（Firebase Storage JS dev）

我能够在Next.js中重现您的错误。我并不十分熟悉它，但我理解Next.js做了React-y服务器端渲染，因此您为页面编写的代码通常会在节点服务器中执行。

不幸的是，Storage isn't supported in node现在，包括服务器端渲染上下文（可以在Github问题中留下关于你的用例的评论）。

它应该在普通的React应用程序（即客户端代码）中工作。

编辑：发现（几乎没有）解决方法

如果您在文件顶部添加导入，则代码似乎不会在Next.js中崩溃：

import firebase from 'firebase'
import _s from 'firebase/storage'
import uuid from 'uuid/v4'
...

无论如何，节点中仍然不支持存储库。大多数有趣的事情（上传对象，获取对象元数据）都不会起作用，所以除非您想要做的只是在某处调用storage.toString()，否则这可能无法解决您的问题。

Answer 2

Firebase文档声明您将存储服务引用保存到变量，然后将存储引用保存到不同的变量。

https://firebase.google.com/docs/storage/web/create-reference

所以我会这样做：

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

您还可以将路径放到存储文件夹中以获取它的引用，如下所示：

const documentImageStorage = storage.ref('/images/');

Answer 3

好的，所以我想出了如何让它发挥作用！

export const storage = process.browser ? firebase.storage().ref() : undefined

这样，后端不可用的存储部分没有被加载，但是在前端它已经完成并且一切正常！

感谢您的回答！

firebase.storage（）不带参数或Firebase App实例

3 个答案: