我试图在TRPC查询中使用我的[id].tsx文件名中的[id]参数，但得到错误：

Unhandled Runtime Error
Error: Rendered more hooks than during the previous render.

这是因为'id'参数最初是未知的。我试图通过react query中的'enabled'标志来默认禁用我的查询，但仍然得到相同的结果。

import type { NextPage } from "next";

import Image from "next/image";
import { useSession } from "next-auth/react";
import { useRouter } from "next/router";
import { api } from "@/utils/api";
import { LoadingSpinner } from "@/components/loading";

const EvaluationPage: NextPage = () => {
  const { data: session } = useSession();
  const router = useRouter();
  const { id } = router.query;

  if (!id || Array.isArray(id)) return <LoadingSpinner />;

  const { data } = api.image.getEvaluation.useQuery(
    {
      id,
    },
    {
      enabled: false,
    }
  );

  return (
    <>
      <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-br from-blue-400 to-indigo-800">
        {session ? (
          <div className="container flex flex-col items-center justify-center gap-12 px-4 py-12 ">
            <h1 className="font-base text-3xl tracking-tight text-gray-100 sm:text-3xl">
              Image evaluation
            </h1>

            <>{data && <p className="text-white">{data.response}</p>}</>
          </div>
        ) : (
          <div className="flex flex-col items-center justify-center gap-4 py-4">
            <h3 className="text-center text-2xl text-gray-100">
              Please sign in to continue.
            </h3>
          </div>
        )}
      </main>
    </>
  );
};

有没有人有任何建议，如何最简单地解决这个问题？