TRPC query based on dynamic url

Using TRPC and Next JS I want to query a single post based on a dynamic url without using SSR or SSG. Only method I found to work is to add as string to router.query.id but this results in a TRPC error (the error only occurs on the first load), because router.query.id is an empty object for the initial load not a string. Is there a way to do this without the initial TRPC error?

import { useRouter } from "next/router";
import { api } from "~/utils/api";

const SinglePost = () => {
  const router = useRouter();
  const { data } = api.post.getById.useQuery({
    id: router.query.id as string,
  });

  return (
    <div>
      {data}
    </div>
  );
};

export default SinglePost;

I modified my query like this:

const { data } = api.post.getById.useQuery(
    {
      id: router.query.id as string,
    },
    { enabled: !!router.query.id}
  );

so it will only start when router.query.id is not an empty object.