Handling undefined Error with useDocument composable and routing in Nuxt App

[dosstx]

I am creating an app that lets users generate short stories. If the user wants to generate more than 5 stories, they will need to subscribe for a premium subscription. I use custom claims to set the user subscription status and then set the number of stories the user has generated on the user's user document in Firestore. This process seems to work fine, however, I seem to have an issue with routing and using the useDocument Vuefire composable and looking for advice on how to handle this situation:

When user clicks a submit handler on the homepage (the StoryInput component) , I get am undefined error:

story.vue:337  Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'subscriptionType')
    at ReactiveEffect.fn (story.vue:337:27)

I think this is due to the state of the user document being queried? 

Here's my Nuxt code for context:

/components/StoryInput.vue:

const handleSubmit = () => {
    const storyStore = useStoryStore()
    const data = {
        prompt: formData.prompt
    }
    storyStore.setStoryData(data)
    const router = useRouter()
    router.push('/story')
}

/pages/story.vue:

<template>
    <div>
        <aside v-if="pending">Loading...</aside>
        <article v-else> Data stuff...</article>
    </div>
</template>

<script setup>
import { useUserStore } from '@/stores/user'
import { useStoryStore } from '@/stores/story'
const { data, pending, error } = useDocument(doc(collection(db, 'users'), userStore.user.uid))

const canGenerateStory = computed(() => {
	// const { storyCount, subscriptionType } = data.value
	const limit = data.value.subscriptionType === 'premium' ? 50 : 5
	return data.value.storyCount < limit
})

onMounted(() => {
	// Handle the custom prompt or predefined topic if generating from homepage
	if (storyStore.storyData && canGenerateStory.value) {
		generateRandomStory(storyStore.storyData)
	}
	if (storyStore.storyData && !canGenerateStory.value) {
		alert('You have reached your story generation limit. Please upgrade your subscription to generate more stories.')
		const router = useRouter()
		router.push('/subscribe')
	}
    // ....
})
</script>

Side note, I do have the story.vue page set to ssr: false in Nuxt Config.

Looking for advice on how to handle this case. Thank you.