Vue.js环境下Firebase云文档数组元素的增改删实现方案

首先纠正一个认知：Firebase Firestore 完全支持对象（映射）类型的数据，不管是作为文档的顶级字段，还是数组中的元素。比如你可以在people集合的文档中存储：

{
  name: "John",
  addresses: [
    { street: "123 Test street", city: "New York" },
    { street: "456 Main Ave", city: "London" }
  ]
}

不需要局限于字符串或数字类型的数组元素。

接下来针对你的核心需求——数组元素的更新，以及补充创建（添加）、删除的完整实现，扩展你现有的useDocumentArray函数：

完整实现代码 #

import { ref } from 'vue'
import { projectFirestore } from '../firebase/config'
import { doc, updateDoc, arrayRemove, arrayUnion, getDoc, runTransaction } from "firebase/firestore";

const useDocumentArray = (firebaseCollection, id, arrayField = 'shifts') => {
    let error = ref(null)
    let isPending = ref(false)
    const docRef = doc(projectFirestore, firebaseCollection, id);

    // 向数组添加元素（自动去重）
    const addArrayItem = async (arrayItem) => {
        isPending.value = true
        error.value = null
        try {
            await updateDoc(docRef, {
                [arrayField]: arrayUnion(arrayItem)
            })
            isPending.value = false
        } catch (err) {
            isPending.value = false
            error.value = '添加数组元素失败'
            console.error(err.message)
        }
    };

    // 删除数组指定元素
    const deleteArrayItem = async (arrayItem) => {
        isPending.value = true
        error.value = null
        try {
            await updateDoc(docRef, {
                [arrayField]: arrayRemove(arrayItem)
            })
            isPending.value = false
        } catch (err) {
            isPending.value = false
            error.value = '删除数组元素失败'
            console.error(err.message)
        }
    };

    // 更新数组中指定元素（基于元素匹配）
    const updateArrayItem = async (oldItem, newItem) => {
        isPending.value = true
        error.value = null
        try {
            // 用事务保证原子性（推荐，避免并发冲突）
            await runTransaction(projectFirestore, async (transaction) => {
                const docSnap = await transaction.get(docRef)
                if (!docSnap.exists()) throw new Error('文档不存在')
                const currentArray = docSnap.data()[arrayField] || []
                // 如果是对象类型元素，建议用唯一标识（比如id）匹配，比JSON.stringify高效
                const updatedArray = currentArray.map(item => 
                    JSON.stringify(item) === JSON.stringify(oldItem) ? newItem : item
                )
                transaction.update(docRef, { [arrayField]: updatedArray })
            })
            isPending.value = false
        } catch (err) {
            isPending.value = false
            error.value = '更新数组元素失败'
            console.error(err.message)
        }
    };

    return { error, isPending, addArrayItem, deleteArrayItem, updateArrayItem };
};

export default useDocumentArray;

代码说明 #

1. 数组元素添加（addArrayItem） #

• 使用arrayUnion方法，自动向数组添加元素，已存在的元素不会重复插入
• 通过[arrayField]语法支持动态指定数组字段（默认值为shifts）

2. 数组元素删除（deleteArrayItem） #

• 保留你原有的arrayRemove实现，优化了状态管理逻辑，统一处理加载状态和错误信息

3. 数组元素更新（updateArrayItem） #

Firestore没有提供直接修改单个数组元素的API，这里采用事务实现：

• 事务能保证并发修改时的数据一致性，避免多用户同时操作导致的冲突
• 匹配元素时，如果是对象类型，建议改用对象的唯一标识（比如id字段）进行匹配，比JSON.stringify更高效

Vue组件中使用示例 #

<script setup>
import useDocumentArray from './composables/useDocumentArray'

// 初始化：操作people集合中id为doc-id-123的文档的addresses数组
const { error, isPending, addArrayItem, deleteArrayItem, updateArrayItem } = useDocumentArray('people', 'doc-id-123', 'addresses')

// 添加地址
const handleAdd = () => {
  addArrayItem({ street: '789 Park Rd', city: 'Paris' })
}

// 删除指定地址
const handleDelete = (item) => {
  deleteArrayItem(item)
}

// 更新指定地址
const handleUpdate = (oldItem) => {
  const newItem = { ...oldItem, city: 'Berlin' }
  updateArrayItem(oldItem, newItem)
}
</script>

<template>
  <div v-if="isPending">处理中...</div>
  <div v-if="error" class="error-text">{{ error }}</div>
  <button @click="handleAdd">添加新地址</button>
</template>

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