如何使用帶有 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>