无法读取未定义的属性“arrayUnion”答案

【问题标题】：Cannot read property 'arrayUnion' of undefined无法读取未定义的属性“arrayUnion”
【发布时间】：2021-03-27 18:15:14
【问题描述】：

我正在尝试向 Firebase 中的现有数组添加一个元素。我正在使用反应。我已经在此处查看了有关此问题的其他提及，并且解决方案始终正是我已经在做的，因此我们将不胜感激。这只需要在用户选择一个团队加入并且我已经检查过团队是否真实时才需要更新

我的火力基地设置：

import firebase from 'firebase/app'
import 'firebase/functions'
import 'firebase/firestore'
import 'firebase/auth'
import 'firebase/storage'

// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGE_SENDER_ID,
  appId: process.env.REACT_APP_ID,
  measurementId: process.env.REACT_APP_MEASUREMENT_ID
};

const firebaseApp = firebase.initializeApp(firebaseConfig)

const db = firebaseApp.firestore()
const auth = firebaseApp.auth()
const storage = firebaseApp.storage()
// const provider = new firebase.auth.GoogleAuthProvider()

export { db, storage, auth }

我的功能：

import { db, storage } from '../../firebase'
...
...
...

if(teams) {
      db.collection('teams').doc(team.id).update({
        teamMembers: db.FieldValue.arrayUnion(currentUser.id)
      })
    }

错误：

Uncaught (in promise) TypeError: Cannot read property 'arrayUnion' of undefined
    at userInfoFirebase (SecondStep.js:179)
    at submitFinalData (SecondStep.js:200)
    at handleSubmit (SecondStep.js:281)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070)
    at executeDispatch (react-dom.development.js:8243)
    at processDispatchQueueItemsInOrder (react-dom.development.js:8275)
    at processDispatchQueue (react-dom.development.js:8288)
    at dispatchEventsForPlugins (react-dom.development.js:8299)
    at react-dom.development.js:8508
    at batchedEventUpdates$1 (react-dom.development.js:22396)
    at batchedEventUpdates (react-dom.development.js:3745)
    at dispatchEventForPluginEventSystem (react-dom.development.js:8507)
    at attemptToDispatchEvent (react-dom.development.js:6005)
    at dispatchEvent (react-dom.development.js:5924)
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at discreteUpdates$1 (react-dom.development.js:22413)
    at discreteUpdates (react-dom.development.js:3756)
    at dispatchDiscreteEvent (react-dom.development.js:5889)

【问题讨论】：

我从未使用过带有 React 的 Firebase，但我认为您应该使用 firebase.firestore.FieldValue.arrayUnion(currentUser.id) 而不是 db.FieldValue.arrayUnion(currentUser.id) ？
db = firebase.firestore() 这就是我在 firebase 文件中设置的方式。
这是不正确的科比。你的db = firebase.firestore()，但FieldValue 是在firebase.firestore 上定义的（没有()）。

标签： javascript reactjs firebase google-cloud-firestore

【解决方案1】：

您的db = firebase.firestore()，但FieldValue 是在firebase.firestore 上定义的（没有()）。

您还需要使用以下命令导出 firebase 命名空间：

export { firebase, db, storage, auth }

通过以下方式导入：

import { firebase, db, storage } from '../../firebase'

然后使用它：

teamMembers: firebase.firestore.FieldValue.arrayUnion(currentUser.id)

或者，您可以导出 arrayUnion 或 FieldValue 本身，并使用它们。

【讨论】：

谢谢！我希望在文档中更清楚。到目前为止，只要我遇到这种结构，我就可以像我在这里尝试的那样缩短。你的解决方案奏效了！
谢谢。我遇到了这个问题并在其他答案上浪费了很多时间，最后在移除这些大括号后它起作用了。一直在尝试谷歌搜索结果解决方案，结果这个答案没有出现，在另一个网站上找到了。

【解决方案2】：

从消防商店导入arrayUnion：

import { arrayUnion} from "firebase/firestore";

然后使用这个：

lessons: arrayUnion("greater_virginia2")

【讨论】：