I have this +page
<script lang="ts"> import { chatStore } from '$lib/stores/chat/chatStore'; import type { Message } from '$lib/types/message'; import { faker } from '@faker-js/faker'; import { Avatar, CodeBlock } from '@skeletonlabs/skeleton'; import { onMount } from 'svelte'; import { page } from '$app/stores'; import { chatHistoryQuery } from '$lib/repositories/firestoreRepository'; import { firestoreUser } from '$lib/stores/firestoreUserStore'; import { Collection, Doc } from 'sveltefire'; import type { ChatHistoryDoc } from '$lib/types/chatHistoryDoc'; import type { Query } from 'firebase/firestore'; let elemChat: HTMLElement; function scrollChatBottom(behavior: ScrollBehavior = 'smooth'): void { elemChat.scrollTo({ top: elemChat.scrollHeight, behavior }); } onMount(() => { scrollChatBottom(); }); $: slug = $page.params.slug; $: selectedQuestionId = $chatStore.selectedQuestion?.id; $: myref = `questions/${selectedQuestionId}/chatHistory/${$firestoreUser?.uid}`; console.log('the ref'); console.log(myref);</script><Doc ref={myref} let:data={history}><section bind:this={elemChat} class="p-4 overflow-y-auto space-y-4"> {#each history.messages as bubble} {#if bubble.role === 'assistant'}<div class="grid grid-cols-[auto_1fr] gap-2"><Avatar src={`https://i.pravatar.cc/?img=${bubble.userId}`} width="w-12" /><div class="card p-4 variant-soft rounded-tl-none space-y-2"><p>{bubble.content}</p></div></div> {:else}<div class="grid grid-cols-[1fr_auto] gap-2"><div class="card p-4 rounded-tr-none space-y-2"><p>{bubble.content}</p></div><Avatar src={`https://i.pravatar.cc/?img=${bubble.userId}`} width="w-12" /></div> {/if} {/each}<div class="text-center p-4"><p>Please select a conversation to view messages.</p></div></section></Doc>The issue is coming from the ${$firestoreUser?.uid}. I am utilizing sveltefire, but when the page loads, firestoreUser is initially null, then loads in. However, this is not reflected in the page. What ends up happening is that the reference is invalid, leading to an empty chat screen when there should be messages.
For reference, here is the firestoreUser store:
import { auth, firestore } from '$lib/firebase';import type { FirestoreUser } from '$lib/types/firestoreUser';import { derived, type Readable } from 'svelte/store';import { docStore, userStore } from 'sveltefire';//use the user store to get the user's data from auth using svetlefireconst user = userStore(auth);export const firestoreUser: Readable<FirestoreUser | null> = derived(user, ($user, set) => { if ($user) { return docStore<FirestoreUser>(firestore, `users/${$user.uid}`).subscribe(set); } else { set(null); }});I'm out of ideas on this one. Any idea why this is happening, or how I can make things reactive?