如何在react-query的useQuery钩子查询函数中解决TypeScript类型报错问题

The TypeScript error you're seeing happens because React Query's default type inference for queryKey is too broad: it assumes each element in the array could be either a string or your object type. Since TypeScript can't guarantee queryKey[1] is always the object with an id property, it throws the error—even though your runtime code works fine.

Here are a few clean, TypeScript-compliant fixes to resolve this:

1. Use as const to Lock in the Query Key Type #

The simplest solution is to define your query key as a constant with as const, which tells TypeScript to infer the exact structure of the array (instead of a loose union type). This lets TypeScript know exactly what queryKey[1] contains:

// Define the query key explicitly with as const
const postQueryKey = ['post', { id: post?.id, comments: true }] as const;

const { data } = useQuery(postQueryKey, async ({ queryKey }) => {
  // TypeScript now knows queryKey[1] is the object, not a string
  const postId = queryKey[1].id;

  // Add a guard to handle the case where post?.id is undefined
  if (!postId) {
    throw new Error('Post ID is required to fetch data');
  }

  const { data } = await axios.get(`/post/${postId}`, {
    headers: { Authorization: `Bearer ${user?.idToken}` },
  });
  return data;
});

2. Explicitly Type the Query Key with Generics #

If you prefer to keep the query key inline, you can use useQuery's generic parameters to define the exact type of your query key. This gives you full control over the type definitions:

// Replace PostType with your actual data return type
type PostType = { /* Your post data structure here */ };
type PostQueryKey = ['post', { id: string | undefined; comments: boolean }];

const { data } = useQuery<PostType, unknown, PostType, PostQueryKey>(
  ['post', { id: post?.id, comments: true }],
  async ({ queryKey }) => {
    const postId = queryKey[1].id;

    if (!postId) {
      throw new Error('Post ID is missing');
    }

    const { data } = await axios.get(`/post/${postId}`, {
      headers: { Authorization: `Bearer ${user?.idToken}` },
    });
    return data;
  }
);

3. Add a Type Guard for Safety #

If you want to keep the code inline without extra type definitions, you can add a type guard to verify queryKey[1] is the object type before accessing id:

const { data } = useQuery(['post', { id: post?.id, comments: true }], async ({ queryKey }) => {
  const queryParams = queryKey[1];

  // Guard against string type or null/undefined
  if (typeof queryParams !== 'object' || queryParams === null) {
    throw new Error('Invalid query parameters provided');
  }

  const postId = queryParams.id;
  if (!postId) {
    throw new Error('Post ID is required');
  }

  const { data } = await axios.get(`/post/${postId}`, {
    headers: { Authorization: `Bearer ${user?.idToken}` },
  });
  return data;
});

Why Avoid as any? #

While as any silences the error, it defeats the purpose of TypeScript by turning off type checking. If your query key structure changes later (e.g., swapping the order of elements), TypeScript won't warn you about the breakage. The solutions above keep type safety intact while resolving the error.

内容的提问来源于stack exchange，提问作者sairaj