Firebase 9.18.0使用arrayUnion报错：Sh.arrayUnion is not a function怎么办

问题场景 #

在使用Firebase ^9.18.0版本创建对象并保存到Firestore时，调用FieldValue.arrayUnion出现如下错误：

Uncaught (in promise) TypeError: Sh.arrayUnion is not a function
    at Object.eval (dashboard.js:231:29)
    at Function.each (jquery-3.5.1.js:381:19)
    at HTMLButtonElement.eval (dashboard.js:221:1)

用户代码示例：

var _obj = {};
_obj["model"] = trimIt(model);
_obj["quantity"] = trimIt(value['__EMPTY']);
_obj["type"] = trimIt(value['__EMPTY_1']);
_obj["company"] = company;
const values = ['a', 'b', 'c'];
_obj["key"] = FieldValue.arrayUnion(...values); 
await addDoc(ref, _obj);

解决方法 #

Firebase v9采用模块化导入，不再支持v8的命名空间式调用，问题出在FieldValue的导入方式错误，以下是两种正确的实现方式：

方式1：直接导入arrayUnion方法 #

// 从firebase/firestore导入所需方法
import { addDoc, arrayUnion } from "firebase/firestore";

// 直接调用arrayUnion
var _obj = {};
_obj["model"] = trimIt(model);
_obj["quantity"] = trimIt(value['__EMPTY']);
_obj["type"] = trimIt(value['__EMPTY_1']);
_obj["company"] = company;
const values = ['a', 'b', 'c'];
_obj["key"] = arrayUnion(...values); 
await addDoc(ref, _obj);

方式2：导入FieldValue对象 #

// 导入FieldValue和addDoc
import { addDoc, FieldValue } from "firebase/firestore";

// 调用FieldValue.arrayUnion
var _obj = {};
_obj["model"] = trimIt(model);
_obj["quantity"] = trimIt(value['__EMPTY']);
_obj["type"] = trimIt(value['__EMPTY_1']);
_obj["company"] = company;
const values = ['a', 'b', 'c'];
_obj["key"] = FieldValue.arrayUnion(...values); 
await addDoc(ref, _obj);

额外检查项 #

• 确认项目中安装的Firebase依赖版本为^9.18.0，可查看package.json文件验证
• 检查导入语句的拼写是否正确，避免路径或方法名写错

内容的提问来源于stack exchange，提问作者Mohit H