如何使用带有 Where QueryConstraint 的 VueUse useFirestore()？

Question

我有一个看起来像这样的 Firestore users文档：

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

还有一个看起来像这样的 Firestore websites文档：

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

现在我正在尝试使用 VueUse useFirestore()包装器来显示websites文档。

为此，我在where Query Constraint 中引用users文档的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);
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) // This produces an error
    // where('companyId', '==', '123') // This works, but is not practical
  )
);
const websites = useFirestore(websiteQuery);
</script>

硬编码123的companyId值有效。

但是，每当我在计算的 ref 中使用user.value?.currentCompanyId时，它都会抛出一个错误，说明如下：

TypeError：“in”的右侧应该是 object，得到 null

Answer 1

仅当值定义如下时才尝试传递QueryConstraint ：

const websiteQuery = computed(() => {
  const queryContraints: any = [];
  const currentCompanyId = user.value?.currentCompanyId;

  if (currentCompanyId) queryContraints.push(where("companyId", "==", currentCompanyId));
  return query(
    collection(db, 'websites'),
    ...queryContraints
  )
});

但是，如果您不提供where()约束，这将返回所有文档，因此可能仅在定义此约束时尝试运行查询，即在 auth state 已加载之后。 onAuthStateChanged()在这里可能有用。

Answer 2

我想到了。

问题是user.value?.currentCompanyId最初是null 。

这是错误消息：

TypeError：“in”的右侧应该是 object，得到 null

它基本上是说Where查询约束的右侧应该是 object，但它得到了 null。

将查询包装在computed的 ref 中最终将在更新时将值从null更改为其他值。 但最初它是null 。 这就是错误的原因。

为了克服这个问题，您可以在useFirestore中设置user的一些初始属性。 因此， Where查询约束最初将使用该非空值。 即使是空字符串也可以。 您可以使用任何不是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, { currentCompanyId: '' }); // <-- See change here

const websiteQuery = computed(() =>
  query(
    collection(db, 'websites'),
    where('companyId', '==', user.value?.currentCompanyId)
  )
);
const websites = useFirestore(websiteQuery);
</script>