TypeScript报错：Property does not exist on type 'unknown'的原因及修复

原代码 #

import { QueryClient, useQuery, useQueryClient, UseQueryOptions } from "@tanstack/react-query"

export function useQueryFactory(getConfig: (queryClient: QueryClient) => UseQueryOptions) {
    const queryClient = useQueryClient()
    const config = getConfig(queryClient)

    return useQuery(config)
}

class Account {
    static findMany() {
        return {
            async queryFn() {
                return {
                    accounts: [{
                        id: 123
                    }],
                }
            },
            queryKey: ["Country", "findMany"],
        }
    }
}

export function AccountsList() {
    const { isSuccess, data } = useQueryFactory(Account.findMany)

    if (isSuccess) {
        // error here Property 'accounts' does not exist on type 'unknown'
        const { accounts } = data

        console.log(accounts)
    }
}

错误原因 #

useQueryFactory未正确处理泛型类型传递：

• UseQueryOptions本身是泛型类型，需要绑定查询返回的数据类型，但当前useQueryFactory的getConfig参数返回的是无泛型约束的UseQueryOptions，导致TypeScript无法推断useQuery返回的data具体类型，只能将其标记为unknown。
• 当尝试从unknown类型的data中解构accounts时，TypeScript会抛出类型错误——因为它无法确认data是否包含该属性。

修复方案 #

给useQueryFactory添加泛型参数，实现类型信息的传递：

import { QueryClient, useQuery, useQueryClient, UseQueryOptions } from "@tanstack/react-query"

// 新增泛型参数TData，承接查询返回的数据类型
export function useQueryFactory<TData>(
  getConfig: (queryClient: QueryClient) => UseQueryOptions<TData>
) {
    const queryClient = useQueryClient()
    const config = getConfig(queryClient)
    return useQuery(config)
}

class Account {
    static findMany() {
        return {
            async queryFn() {
                return {
                    accounts: [{ id: 123 }],
                }
            },
            queryKey: ["Country", "findMany"],
        }
    }
}

export function AccountsList() {
    // TypeScript现在能正确推断data的类型为{ accounts: { id: number }[] }
    const { isSuccess, data } = useQueryFactory(Account.findMany)

    if (isSuccess) {
        const { accounts } = data!
        console.log(accounts)
    }
}

如果需要更严谨的类型约束，可以给Account.findMany的返回值添加类型校验：

class Account {
    static findMany() {
        return {
            async queryFn() {
                return {
                    accounts: [{ id: 123 }],
                } as const
            },
            queryKey: ["Country", "findMany"],
        } satisfies UseQueryOptions<{ accounts: { id: number }[] }>
    }
}

核心逻辑是通过泛型让useQueryFactory承接并传递UseQueryOptions的类型信息，让TypeScript能准确推断data的具体类型，不再是unknown。

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