React项目中Firestore数据库数组对象name属性更新报错问题

我正在开发React应用，用Firebase/Firestore做数据库，想通过textarea更新Firestore文档中categories数组内指定对象的name属性。

数据库结构 #

文档包含一个categories数组，数组元素是带id（唯一标识）和name属性的对象。

当前代码 #

const updateCategoryInfo = async (categoryId: number, categoryName: string) => {
  await updateDoc(docRef, {
    [`categories[${categoryId}].name`]: categoryName
  })
  .then(() => {
    console.log("Category updated succesfully!")
  })
  .catch((error) => {
    console.error("Error updating categoryname", error)
  })
}

报错信息 #

执行后提示：Function updateDoc() called with invalid data. FieldPath names may not contain '['

解决方案 #

Firestore不支持用[索引]直接定位数组元素更新，提供两种可行方案：

方案1：原子更新（推荐，避免并发冲突） #

利用arrayRemove移除旧对象，再用arrayUnion添加修改后的新对象（依赖对象的唯一id）：

import { updateDoc, doc, arrayRemove, arrayUnion, getDoc } from "firebase/firestore";

const updateCategoryInfo = async (categoryId: number, categoryName: string) => {
  // 获取原文档数据，找到目标分类对象
  const docSnap = await getDoc(docRef);
  const originalCategory = docSnap.data()?.categories.find(cat => cat.id === categoryId);
  
  if (!originalCategory) return;
  
  // 构造修改后的分类对象
  const updatedCategory = { ...originalCategory, name: categoryName };
  
  try {
    await updateDoc(docRef, {
      categories: arrayRemove(originalCategory),
      categories: arrayUnion(updatedCategory)
    });
    console.log("分类更新成功！");
  } catch (err) {
    console.error("更新分类名称出错：", err);
  }
}

方案2：先读再写（适合无并发场景） #

先读取整个文档，修改数组后重新写入：

import { updateDoc, doc, getDoc } from "firebase/firestore";

const updateCategoryInfo = async (categoryId: number, categoryName: string) => {
  const docSnap = await getDoc(docRef);
  const data = docSnap.data();
  
  if (!data) return;
  
  // 遍历数组，修改目标分类的name
  const updatedCategories = data.categories.map(cat => 
    cat.id === categoryId ? { ...cat, name: categoryName } : cat
  );
  
  try {
    await updateDoc(docRef, { categories: updatedCategories });
    console.log("分类更新成功！");
  } catch (err) {
    console.error("更新分类名称出错：", err);
  }
}

报错原因 #

Firestore的字段路径不允许包含[字符，categories[${categoryId}].name这种写法违反规则，因此无法直接通过索引定位数组元素更新。

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