Firestore Documents

Reactive document subscription

firekitDoc returns a reactive instance that subscribes to the document in real time. The UI updates automatically whenever the document changes.

<script lang="ts">
  import { firekitDoc } from 'svelte-firekit';

  interface Post {
    title: string;
    body: string;
    published: boolean;
  }

  const post = firekitDoc<Post>('posts/my-post-id');
</script>

{#if post.loading}
  <p>Loading…</p>
{:else if post.error}
  <p>Error: {post.error.message}</p>
{:else if post.data}
  <h1>{post.data.title}</h1>
  <p>{post.data.body}</p>
{:else}
  <p>Document not found.</p>
{/if}

Instance properties

Property	Type	Description
data	T | null	Document data, or null if not found / not yet loaded
loading	boolean	true while the initial snapshot is being fetched
error	Error | null	Set if the subscription fails
exists	boolean	Whether the document exists in Firestore
metadata	SnapshotMetadata | null	Raw Firestore snapshot metadata

Change path reactively

Call setPath to tear down the existing listener and subscribe to a different document:

// Switch to a different document
post.setPath('posts/another-post-id');

This is useful when the path depends on user interaction or route parameters:

<script lang="ts">
  import { firekitDoc } from 'svelte-firekit';

  let { postId } = $props<{ postId: string }>();

  const post = firekitDoc<Post>(`posts/${postId}`);

  $effect(() => {
    post.setPath(`posts/${postId}`);
  });
</script>

One-time fetch

When you don’t need a live subscription, use firekitDocOnce. It fetches the document once and does not open a listener.

import { firekitDocOnce } from 'svelte-firekit';

const post = firekitDocOnce<Post>('posts/my-post-id');
// post.data is populated after the fetch resolves

Document with metadata

firekitDocWithMetadata gives you access to Firestore snapshot metadata (e.g. fromCache, hasPendingWrites):

import { firekitDocWithMetadata } from 'svelte-firekit';

const post = firekitDocWithMetadata<Post>('posts/my-post-id');
// post.metadata.fromCache — true if data came from local cache
// post.metadata.hasPendingWrites — true if there are unsaved local writes

Options

All firekitDoc* functions accept an optional options object as the third argument:

const post = firekitDoc<Post>('posts/id', [], {
  includeMetadataChanges: true, // re-trigger on cache/pending-write metadata changes
});

Option	Type	Default	Description
includeMetadataChanges	boolean	false	Listen to metadata changes as well as data changes

<Doc> component

The <Doc> component wraps firekitDoc in a declarative template interface using Svelte snippets.

<script lang="ts">
  import { Doc } from 'svelte-firekit';
</script>

<Doc path="posts/my-post-id">
  {#snippet data(post)}
    <h1>{post.title}</h1>
    <p>{post.body}</p>
  {/snippet}

  {#snippet loading()}
    <p>Loading…</p>
  {/snippet}

  {#snippet error(err)}
    <p>Error: {err.message}</p>
  {/snippet}
</Doc>

<Doc> props

Prop	Type	Required	Description
path	string	Yes	Firestore document path
includeMetadataChanges	boolean	No	Forward to the underlying subscription

<Doc> snippets

Snippet	Arguments	Description
data	T	Rendered when document data is available
loading	—	Rendered while loading
error	Error	Rendered when the subscription fails
missing	—	Rendered when the document does not exist