User doc in Pinia with Nuxt

[davidstackio]

I have a users collection where I store information about the user beyond what the standard auth object has (e.g. mailing address). I'm trying to fill a Pinia store with this document using Nuxt in ssr: false mode.

Here's what I have so far...

stores/userStore.ts

import { doc } from "firebase/firestore";

export const useUserStore = defineStore("UserStore", async () => {
  const currentUser = await getCurrentUser();
  if (currentUser) {
    const userDocRef = doc(db, "users", currentUser.uid);
    const user = useDocument(userDocRef);

    return { user };
  } else {
    return {};
  }
});

if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot));
}

index.vue

<script setup lang="ts">
const userStore = useUserStore();
const userDoc = userStore.user;
</script>

<template>
  <div>
    <h1>Index page</h1>
    <pre>{{ userDoc }}</pre>
  </div>
</template>

I'm also using a very basic default.vue file.

The issue I'm running into is in index.vue I'm getting an error on the 3rd line:

Property 'user' does not exist on type 'Store<"UserStore", _UnwrapAll<Pick<Promise<{ user: _RefFirestore<DocumentData | undefined>; } | { user?: undefined; }>, unique symbol>>, Pick<...>, Pick<...>>'.Vetur(2339)

I'm using nuxt-vuefire 0.1.5, vuefire 3.0.1, @pinia/nuxt 0.4.6, pinia 2.0.29, and nuxt 3.1.0.

Any idea what's going on? Is there a better way to structure my code?

Thanks!

[posva]

The problem is const currentUser = await getCurrentUser(); the setup function of a store must be sync. Use the current user instead. You shouldn't have a conditional return in a setup function either, it's just not meant to be used that way. What is exposed should be stable.

const currentUser = useCurrentUser()
const userDocRef = computed(() => doc(db, 'users', currentUser.value?.uid))
const user = useDocument(userDocRef)

return { user }

[davidstackio]

Thank you for explaining that! Pinia is still new to me.

I updated my stores/userStore.ts file to:

import { doc } from "firebase/firestore";

export const useUserStore = defineStore("UserStore", () => {
  const currentUser = useCurrentUser();
  const userDocRef = computed(() => doc(db, "users", currentUser.value?.uid));
  const user = useDocument(userDocRef);

  return { user };
});

if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot));
}

But then I get this Typescript error on line five:

const currentUser: Ref<_Nullable<User>>
No overload matches this call.
  Overload 1 of 3, '(firestore: Firestore, path: string, ...pathSegments: string[]): DocumentReference<DocumentData>', gave the following error.
    Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
      Type 'undefined' is not assignable to type 'string'.
  Overload 2 of 3, '(reference: CollectionReference<unknown>, path?: string | undefined, ...pathSegments: string[]): DocumentReference<unknown>', gave the following error.
    Argument of type 'Firestore' is not assignable to parameter of type 'CollectionReference<unknown>'.
      Type 'Firestore' is missing the following properties from type 'CollectionReference<unknown>': id, path, parent, withConverter, and 2 more.
  Overload 3 of 3, '(reference: DocumentReference<unknown>, path: string, ...pathSegments: string[]): DocumentReference<DocumentData>', gave the following error.
    Argument of type 'Firestore' is not assignable to parameter of type 'DocumentReference<unknown>'.
      Type 'Firestore' is missing the following properties from type 'DocumentReference<unknown>': converter, firestore, id, path, and 2 more.ts(2769)

With this console error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'indexOf')
    at rt.fromString (index.esm2017.js:1032:19)
    at Aa (index.esm2017.js:16452:22)
    at ReactiveEffect.fn (userStore.ts:5:3)
    at ReactiveEffect.run (reactivity.esm-bundler.js:187:25)
    at get value [as value] (reactivity.esm-bundler.js:1150:39)
    at unref (reactivity.esm-bundler.js:1056:29)
    at _useFirestoreRef (index.mjs:679:30)
    at useDocument (index.mjs:780:10)
    at userStore.ts:6:3
    at pinia.mjs:1436:32

So I tried to do this:

const userDocRef = computed(() =>
    doc(db, "users", currentUser.value?.uid ?? "")
  );

Which got rid of the typescript error, but then I got these console messages:

I don't think Firebase liked the empty string.

So I updated it to:

export const useUserStore = defineStore("UserStore", () => {
  const currentUser = useCurrentUser();
  const userDocRef = computed(() => {
    console.log(currentUser.value?.uid);
    if (currentUser.value?.uid) {
      return doc(db, "users", currentUser.value?.uid);
    } else {
      return undefined;
    }
  });
  const user = useDocument(userDocRef);

  return { user };
});

Which didn't throw any errors, but the data didn't show up on the index page. The console.log showed undefuned, then the correct uid. So it seems to be getting the right uid eventually, but the doc isn't reactive.

I also updated to Nuxt 3.1.1, but that didn't seem to help either.

Any ideas?

[posva]

That error is because doc() from firestore cannot create a document without an id, so user.value?.uid cannot be used as it might return undefined. Instead do:

const userDocRef = computed(() => currentUser.value && doc(db, 'users', currentUser.value.uid))
const user = useDocument(userDocRef)

useDocument() will ignore null and undefined values until the user is logged in and currentUser exists 😉 . It's normal for it to start as undefined because Firebase has to verify the credentials are valid.

[davidstackio]

That makes sense -thanks! It's now mostly working... When the initial app loads (after a refresh), the data is not displayed. BUT when I navigate to a different route, then navigate back, the data shows up. What do I need to do to make sure the data is there when the page is refreshed (not just navigated to client side)?

[posva]

That I can't tell without a boiled down reproduction... The code you showed should be fine. Try moving it out of the store to see if it's related

[davidstackio]

@posva I did get this working in the end, but I don't remember what I did or what the issue was. One thing I noticed is there has been some weird behavior when using VueFire composables within a Pinia store. Like sometimes the data is no longer updating in realtime, or the the collection seems to be cleared.

Related discussions: #1426 and #1428