reactjs中firestore的新文档参考答案

【问题标题】：new document reference of firestore in reactjsreactjs中firestore的新文档参考
【发布时间】：2018-11-25 16:58:28
【问题描述】：

我正在使用 reactjs，并试图将 firestore 中集合的文档中字段的“值”设置为另一个文档的文档引用。

例如，我正在尝试使用以下代码，它是一个 json 文件，由我使用的系统读取。

import * as firebase from 'firebase';
require("firebase/firestore");

var collectionMeta={
    "users":{
        "fields":{
            "firstname":"",
            "lastname":"",
            "email": "",
            "gender":"",
            "birthday":"",
            "group":"",
            "subGroups":"",
            "roles":"-",
            "code":""
        },
        "collections":[],
    },
    "announcements":{
        "fields":{
            "title":"",
            "content":"",
            "active":false,
            "start":"",
            "end":"",
            "group": new firebase.firestore.DocumentReference("/groups/docID")
        },
        "collections":[],
    },
    "groups":{ 
        "fields":{
            "name":"",
            "registerCode":""
        },
        "collections":[]
    },
}
module.exports = collectionMeta;

目前，“new firebase.firestore.DocumentReference("/groups/docID")”部分出现错误。

我得到的错误：

Uncaught Error: This constructor is private. Use firebase.firestore().doc() instead.

但是当我尝试这样做时，我收到以下错误：

Firebase: No Firebase App '[DEFAULT]' has been cre…- call Firebase App.initializeApp()

它已经初始化，因为如果我删除整行，一切都很好。

怎么办？

【问题讨论】：

您的代码没有显示您在任何地方都在调用initializeApp。确保在调用 firebase.firestore() 之前发生这种情况。
我使用 mobidonia 管理面板，初始化在其他地方完成。通常不在该文件中。所以不知道如何解决这个问题。

标签： reactjs firebase google-cloud-firestore

【解决方案1】：

问题可能出在您使用 firebase 的顺序上。确保先初始化 firebase，然后使用 firestore 获取或更新任何类型的数据。

这是 firebase utils/config 文件，其中完成了 firebase 的初始化！

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
  storageBucket: "mygiene-f2d83.appspot.com",
  messagingSenderId: "sender_id",
  appId: "app_id",
  measurementId: "measurement-id",
};

// Initialize Firebase

// this if condition checks if your firebase app is already intialized then it // stops it from re-initializing again
if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
} 

// only exporting firebase auth and firestore. 
export const auth = firebase.auth();
export const firestore = firebase.firestore();

然后只需将其导入其他文件中即可使用，如下所示

import { firestore } from "../../firebase/utils";
import { useContext, useEffect, useState } from "react";

export const Component = () => {
  const [product, setproduct] = useState();

useEffect(async () => {
    const productRef = await firestore.doc("products/grooming_kit").get();
    const { id } = productRef;
    setproduct({ ...productRef.data(), pId: id });
  }, []);


return(<>
//Simply use the value stored over state however you linke
</>)
}

瞧！ :) 希望这会有所帮助。

【讨论】：