如何在另一个useFirestore中引用VueUse useFirestore的ref？

你的问题出在两个核心点：初始时依赖的异步值未就绪就创建了无效文档引用，以及用watch重新赋值ref变量导致模板无法感知更新。以下是正确的实现方式：

正确代码示例 #

<template>
  <div v-if="user">{{ user }}</div> 
  <div v-if="website">{{ website }}</div>
</template>

<script setup lang="ts">
import { useAuth } from '@vueuse/firebase/useAuth';
import { useFirestore } from '@vueuse/firebase/useFirestore';
import { doc } from 'firebase/firestore';
import { auth, db } from 'src/config/firebase';
import { User, Website } from 'src/types';
import { computed } from 'vue';

const { user: authUser } = useAuth(auth);

// 用computed创建响应式用户文档引用，自动跟随authUser的uid变化
const userDocRef = computed(() => {
  if (!authUser.value?.uid) return null;
  return doc(db, `users/${authUser.value.uid}`);
});
const user = useFirestore<User>(userDocRef);

// 用computed创建响应式网站文档引用，依赖user的currentWebsiteId字段
const websiteDocRef = computed(() => {
  if (!user.value?.currentWebsiteId) return null;
  return doc(db, `websites/${user.value.currentWebsiteId}`);
});
const website = useFirestore<Website>(websiteDocRef);
</script>

为什么之前的写法无效？ #

1. 初始无效引用：原代码中userDocRef和websiteDocRef是组件初始化时同步创建的，此时authUser.value?.uid和user.value?.currentWebsiteId均为undefined，相当于订阅了users/undefined和websites/undefined这类无效路径的文档，自然无法获取数据。
2. watch赋值错误：你尝试用watch重新赋值website变量，但Vue响应式系统中，模板绑定的是最初的空ref对象，后续赋值新的useFirestore返回的ref时，变量指向的对象已改变，但模板没有跟踪这个变量的引用变化，因此不会更新。

核心原理 #

useFirestore支持接收响应式的文档引用作为参数，当引用发生变化时，它会自动取消旧订阅并重新订阅新文档。用computed生成响应式的文档引用，正好适配这个特性，完美解决异步依赖的链式获取问题。

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