Handling Async Params and Suspense Queries in a T3 Stack Next.js App

'use client'
import { notFound } from "next/navigation";
import { api } from "@/trpc/react";
import StoryDisplay from "@/app/_components/StoryDisplay";
import { use } from "react";

export default function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params); 
  
  const [story] = api.story.getById.useSuspenseQuery({id});
  
  if (!story) {
    notFound();
  }
  
  return <StoryDisplay story={story} />;
}

'use client'
import { notFound } from "next/navigation";
import { api } from "@/trpc/react";
import StoryDisplay from "@/app/_components/StoryDisplay";
import { use } from "react";

export default function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params); 
  
  const [story] = api.story.getById.useSuspenseQuery({id});
  
  if (!story) {
    notFound();
  }
  
  return <StoryDisplay story={story} />;
}