Question

所以我不确定如何确切地做到这一点。这是我所拥有的：

在我的Index.js中，

Index.getInitialProps = async function () {
  const firebase = require('firebase')

  const firebaseConfig = {
    apiKey: "examplezbxW_9nKoUjas",
    authDomain: "example-prod.firebaseapp.com",
    databaseURL: "https://example-prod.firebaseio.com",
    projectId: "example-prod",
    storageBucket: "example-prod.appspot.com",
    messagingSenderId: "1234567890",
    appId: "1:1234567890:web:1234567890"
  };

  if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig)
  }

  const db = firebase.firestore()

  const data = db.collection('data').get()

  return {
    data
  }
}

这给我一个FirebaseError: projectId must be a string in FirebaseApp.options

的错误

（也许我需要运行firebase节点程序包并登录...）

它表明错误发生在此行const db = firebase.firestore()

感谢您的帮助。也许这不是我应该尝试加载Firestore数据的地方……不确定。

我还考虑过创建节点服务器并以此方式进行操作，但理想情况下，我想避免这种情况。

Answer 1

好的，因此我进行了一些更改来解决此问题。

我将Firebase初始化移到了另一个文件，该文件如下所示：

import firebase from 'firebase/app'
import 'firebase/firestore'

export function loadDB() {
  try {
    var config = {
      apiKey: "YOUR INFO HERE",
      authDomain: "YOUR INFO HERE.firebaseapp.com",
      databaseURL: "https://YOUR INFO HERE.firebaseio.com",
      projectId: "YOUR INFO HERE",
      storageBucket: "YOUR INFO HERE.appspot.com",
      messagingSenderId: "YOUR INFO HERE",
      appId: "YOUR INFO HERE"
    };
    firebase.initializeApp(config);
  } catch (err) {
    // we skip the "already exists" message which is
    // not an actual error when we're hot-reloading
    if (!/already exists/.test(err.message)) {
      console.error('Firebase initialization error', err.stack);
    }
  }

  return firebase;
}

然后，在我的NextJS组件中，在getInitialProps方法中，我有：

import { loadDB } from '../lib/db'

Index.getInitialProps = async function () {
  const db = await loadDB()
  let data = []
  const querySnapshot = await db.firestore().collection('data').get()
  querySnapshot.forEach(doc => {
    data.push(doc.data())
  })

  return {
    data
  }
}

NextJS：访问Google Firestore数据

1 个答案: