如何从对象中获取FireStore自动生成的文档ID并保存为可用变量

问题原因 #

你调用自定义getCollection返回的userDocs是ref包裹的响应式数组，存储的是所有符合查询条件的文档集合，你之前取值失败的核心原因是混淆了响应式对象访问和数组结构：

• userDocs.id：直接访问数组本身的id属性，数组不存在该属性，返回undefined
• userDocs.value.id：通过.value拿到数组本身后直接取id，数组不存在该属性，返回undefined
  你在模板中用v-for可以正常遍历取id，本质就是遍历数组的每一项元素，从单个文档对象上取id属性。

解决方案 #

因为你查询条件用的是当前用户的uid，正常只会匹配到1条userData文档，直接取数组第一项的id即可，同时要注意getCollection是异步拉取数据，初始加载阶段数组为空，需要增加非空判断避免报错。

方案1：直接在新增函数内取值 #

const addNew = async (plant) => {
  // 先判断数据是否加载完成、是否存在匹配的文档
  if (!userDocs.value || userDocs.value.length === 0) {
    // 可自行增加加载中提示、重试逻辑
    return
  }
  // 取第一条匹配文档的id
  const targetDocId = userDocs.value[0].id

  const userPlant = {
    plant: plant,
    planted: tempPlanted,
  };
  const res = await projectFirestore
    .collection("userData")
    .doc(targetDocId)
    .collection("plants")
    .add(userPlant);
};

方案2：提前用计算属性封装文档id #

如果多个地方需要用到该文档id，可以用计算属性提前封装，避免重复写取值逻辑：

import { computed } from 'vue'

const currentUserDocId = computed(() => {
  // 数据未加载/无匹配文档时返回空
  if (!userDocs.value?.length) return null
  return userDocs.value[0].id
})

// 新增函数直接使用计算属性即可
const addNew = async (plant) => {
  if (!currentUserDocId.value) return

  const userPlant = {
    plant: plant,
    planted: tempPlanted,
  };
  const res = await projectFirestore
    .collection("userData")
    .doc(currentUserDocId.value)
    .collection("plants")
    .add(userPlant);
};

补充说明 #

你之前直接console.log(userDocs)能看到id属性，是因为浏览器控制台输出的是对象引用，等你手动展开控制台内容时，异步接口已经拉取到数据，所以能看到完整结构，而你同步执行取值代码时，数据还未加载完成，自然取不到值，所以必须增加非空判断。

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