NextJS：访问 Google Firestore 数据答案

【问题标题】：NextJS: Accessing Google Firestore dataNextJS：访问 Google Firestore 数据
【发布时间】：2019-05-16 09:34:42
【问题描述】：

所以我不确定该怎么做。这是我所拥有的：

在我的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 数据的地方……不确定。

我也考虑过创建一个节点服务器并这样做，但理想情况下，我想避免这种情况。

【问题讨论】：

标签： firebase next.js

【解决方案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
  }
}

【讨论】：