Typescript 当传递带有或不带有参数的函数作为组件props 时，我应该如何指定类型

import { dehydrate, HydrationBoundary } from '@tanstack/react-query';

import getQueryClient from '@/lib/react-query/getQueryClient';

export async function RQBoundary<T>({
  children,
  queryKey,
  fn,
}: {
  children: React.ReactNode;
  queryKey: string[];
  fn: () => Promise<T>;
}) {
  const queryClient = getQueryClient();

  await queryClient.prefetchQuery({
    queryKey,
    queryFn: fn,
  });
  const dehydratedState = dehydrate(queryClient);
  return (
    <HydrationBoundary state={dehydratedState}>{children}</HydrationBoundary>
  );
}


export default function Page() {
  return (
    ...
      <RQBoundary queryKey={['posts']} fn={getPosts}>
        <PostTable />
      </RQBoundary>
    ...
  );
}

要在Reaction-Query中配置SSR，我们将如上所述创建和使用RQ边界.

但是，FETCH函数有时会接收需要参数的函数.在本例中，由于RQBoundary组件的类型为fn: () => Promise<T>;，因此向其传递带有参数的函数将导致以下错误.

Type '(id: string) => Promise<ResponsePost>' is not assignable to type '() => Promise<ResponsePost>'. Target signature provides too few arguments. Expected 1 or more, but got 0.个 如何创建既可以向存在的函数传递参数，也可以向不存在的函数传递参数的组件？

export async function RQParamsBoundary<T>({
  children,
  queryKey,
  fn,
  params
}: {
  params:string
  children: React.ReactNode;
  queryKey: string[];
  fn: (id:string) => Promise<T>;
}) {
  const queryClient = getQueryClient();

  await queryClient.prefetchQuery({
    queryKey,
    queryFn: ()=>fn(params),
  });
  const dehydratedState = dehydrate(queryClient);
  return (
    <HydrationBoundary state={dehydratedState}>{children}</HydrationBoundary>
  );
}

我不认为创建另一个这样的组件是个好主意.