React集成Firebase时调用arrayUnion报undefined属性读取错误求助

报错根因 #

你代码里调用 arrayUnion 的路径完全错误：db 是 Firestore 的数据库实例，不存在 FieldValue 这个挂在实例上的属性，所以读取 db.FieldValue 的结果是 undefined，继续访问上面的 arrayUnion 方法就会抛出当前报错。这个问题和你提前校验 teams 非空、判断用户登录状态等前置逻辑没有关系。

问题代码定位 #

你当前触发报错的业务逻辑写法：

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

错误点完全出在 db.FieldValue 这个调用路径上。

适配你当前 SDK 版本的修正方案 #

从你初始化代码的导入方式可以判断，你用的是 Firebase JS SDK v8 兼容版本，按以下任意一种方式修改即可解决：

方案1：直接通过全局 firebase 对象调用静态方法 #

1. 在业务组件文件里全局导入 firebase 核心模块

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

2. 修改更新逻辑里的 arrayUnion 调用路径，从挂在 db 上改为从 firestore 静态模块取：

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

方案2：在初始化文件统一导出 FieldValue，简化业务代码 #

不用每个业务文件都导入全局 firebase 对象，直接在你的 firebase 配置文件里新增一行导出：

// 原有初始化代码保持不变
const db = firebaseApp.firestore()
const auth = firebaseApp.auth()
const storage = firebaseApp.storage()
// 新增：把 FieldValue 作为独立方法导出
const FieldValue = firebase.firestore.FieldValue

export { db, storage, auth, FieldValue }

业务组件里直接导入使用即可，逻辑代码改为：

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

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

常见踩坑提醒 #

不管是哪个版本的 Firebase Web SDK，FieldValue 都是 Firestore 模块的静态导出属性，从来不是数据库实例上的方法。很多旧教程里的简写写法容易让人误以为可以通过 db.FieldValue 调用，实际运行都会触发未定义错误。

内容的提问来源于stack exchange，提问作者Bryant Richards