Redux Toolkit Query使用transformResponse返回值时遇TypeScript错误

问题原因 #

当使用queryFn自定义查询逻辑时，RTK Query无法自动推断transformResponse的第一个参数baseQueryReturnValue的类型，默认被标记为unknown，而你的查询声明的返回类型是Category[]，因此TypeScript会抛出类型不兼容的错误。

解决方案 #

手动为transformResponse的baseQueryReturnValue参数指定明确的类型，匹配你在queryFn中返回的data类型：

getAllCategories: builder.query<Category[], void>({
    async queryFn() {
        try {
            const ref = collection(db, "categories");
            const querySnapshot = await getDocs(ref);
            let categories: Category[] = [];
            querySnapshot?.forEach((doc) => {
                categories.push({ id: doc.id, ...doc.data() } as Category);
            });

            return { data: categories };
        } catch (error: any) {
            console.error(error.message);
            return { error: error.message };
        }
    },

    transformResponse(baseQueryReturnValue: Category[], meta, arg) {
        // 在这里可以对categories数据做自定义修改
        return baseQueryReturnValue;
    },

    providesTags: ["CategoriesTag"],
}),

补充说明 #

如果需要在queryFn内直接修改响应数据，确保你返回的data严格符合Category[]类型，比如检查doc.data()的结构是否和Category接口匹配，避免过度依赖类型断言as Category带来的潜在问题。

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