如何在VueUse useFirestore()中使用关联字段的Where查询约束？

文档结构 #

users 文档 #

{
    currentCompanyId: "123",
    displayName: "Mary Jane" 
}

websites 文档 #

{
    companyId: "123",
    homePageUrl: "https://www.google.com/"
}

问题场景 #

使用VueUse的useFirestore工具查询websites集合，希望通过当前用户文档的currentCompanyId作为查询条件。硬编码companyId为"123"时查询正常，但使用user.value?.currentCompanyId作为条件时，抛出以下错误：

TypeError: right-hand side of 'in' should be an object, got null

相关代码如下：

<template>
  <div>
    {{ websites?.[0] }}
  </div>
</template>

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

const { user: authUser } = useAuth(auth);
const userDocRef = doc(db, `users/${authUser.value?.uid}`);
const user = useFirestore<User>(userDocRef);

const websiteQuery = computed(() =>
  query(
    collection(db, 'websites'),
    where('companyId', '==', user.value?.currentCompanyId) // 此处报错
    // where('companyId', '==', '123') // 此写法可行，但不实用
  )
);
const websites = useFirestore(websiteQuery);
</script>

问题原因 #

useFirestore初始化时，user.value的初始值为null，此时user.value?.currentCompanyId返回undefined。Firestore的where约束不允许将undefined或null作为匹配值，因此触发类型错误。

解决方案 #

通过判断字段有效性，仅在currentCompanyId存在时构建查询，避免无效查询触发错误：

<template>
  <div>
    {{ websites?.[0] }}
  </div>
</template>

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

const { user: authUser } = useAuth(auth);
// 仅当用户UID存在时创建文档引用
const userDocRef = computed(() => authUser.value?.uid ? doc(db, `users/${authUser.value.uid}`) : null);
// 明确user类型包含null
const user = useFirestore<User | null>(userDocRef);

const websiteQuery = computed(() => {
  const companyId = user.value?.currentCompanyId;
  // 只有当companyId有效时才构建查询
  if (!companyId) return null;
  
  return query(
    collection(db, 'websites'),
    where('companyId', '==', companyId)
  );
});
// 当查询为null时，useFirestore会停止监听或返回null
const websites = useFirestore(websiteQuery);
</script>

关键修改点 #

• 将userDocRef改为计算属性，避免在用户未登录时创建无效的文档引用
• 在构建查询前先校验companyId的有效性，无效时返回null，阻止useFirestore执行无效查询
• 给user指定User | null类型，匹配初始加载状态的类型

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