Flutter使用FieldValue.arrayRemove删除Firestore数组元素报错求助

错误信息 #

FirebaseError: Function updateDoc() called with invalid data. Invalid field path ([object Object]). Paths must not contain '~', '*', '/', '[', or ']'.

场景复现 #

最初怀疑是数组元素含特殊字符导致报错，但创建不含特殊字符的测试文档后，执行更新仍触发相同错误。

原更新代码：

// 删除数组元素
await FirebaseFirestore.instance
    .collection('users')
    .doc(FirebaseAuth.instance.currentUser!.uid)
    .collection('images')
    .doc(widget.id)
    .update(
  {
    'outputs': FieldValue.arrayRemove(
      ['/output/0/1f03f210.png'],
    ),
  },
);

临时解决方案 #

目前采用本地获取数组后修改再合并更新的方式：

Future deleteImage(Map imageMap) async {
  String singleOutput = imageMap['output'];

  DocumentReference docRef = FirebaseFirestore.instance
      .collection('users')
      .doc(FirebaseAuth.instance.currentUser!.uid)
      .collection('images')
      .doc(widget.id);

  DocumentSnapshot docFields = await docRef.get();
  if (docFields.exists) {
    Map? docData = docFields.data() as Map<String, dynamic>;
    if (docData.containsKey('outputs')) {
      if (docData['outputs'].length <= 1) {
        docRef.delete();
      } else {
        List<dynamic> myArray = docData['outputs'];
        int index = myArray.indexOf(singleOutput.toString());
        myArray.removeAt(index);
        docRef.set({
          'outputs': myArray,
        }, SetOptions(merge: true));
      }
    }
  }
}

环境信息 #

• cloud_firestore: ^4.0.5
• Flutter version 3.8.0-13.0.pre.50（master渠道）
• Dart version 3.0.0 (build 3.0.0-240.0.dev)
• 运行环境：Chrome Web（release模式，web-renderer为html）

问题根源 #

核心原因是Flutter Web平台下，cloud_firestore 4.x版本与Dart 3.0预览版存在兼容性问题。FieldValue.arrayRemove()在Web端被错误序列化为[object Object]，导致Firestore将其识别为非法字段路径格式。

正确解决方案 #

方案1：调整依赖版本 #

• 升级cloud_firestore到支持Dart 3.0的稳定版本（如^4.8.0及以上）
• 或降级Flutter/Dart到稳定版（如Flutter 3.7.x + Dart 2.19.x），避免使用预览版Dart 3.0。

方案2：直接调用Firebase JS SDK（临时兼容） #

如果暂时无法调整版本，可通过firebase_core_web直接调用JS侧API实现数组删除：

import 'package:firebase_core/firebase_core.dart';
import 'dart:js' as js;

Future<void> deleteArrayElement() async {
  final jsFirestore = js.context['firebase']['firestore']();
  final docRef = jsFirestore
      .collection('users')
      .doc(FirebaseAuth.instance.currentUser!.uid)
      .collection('images')
      .doc(widget.id);
  
  await js.promiseToFuture(docRef.update({
    'outputs': js.context['firebase']['firestore']['FieldValue'].arrayRemove('/output/0/1f03f210.png')
  }));
}

方案3：保留现有临时方案 #

当前本地修改数组再更新的方式可行，但需注意并发更新冲突——多客户端同时修改同一数组时可能出现数据覆盖丢失，适合低并发场景继续使用。

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