如何在RTK Query的queryFn中传递参数？

问题根源 #

你直接把 queryFn 的参数当成了传入的元素ID，但RTK Query给 queryFn 传递的是一个包含 queryKey 的对象，不是直接的参数值，所以才会拿到undefined。

修正代码 #

1. 调整 queryFn 的参数获取逻辑

把原来直接取参数的方式改成从 queryKey 数组里提取：

// 定义查询的部分
getElement: builder.query({
  queryFn: async ({ queryKey }) => {
    // queryKey 第一个元素是查询名称，第二个是你传入的ID
    const [_, elementId] = queryKey;
    const docRef = doc(db, "elements", elementId);
    const docSnap = await getDoc(docRef);
    
    if (docSnap.exists()) {
      return { data: docSnap.data() };
    } else {
      throw new Error("找不到对应文档");
    }
  },
})

2. 调用逻辑保持不变

调用时直接传入元素ID即可，RTK Query会自动把它加入到 queryKey 中：

// 组件内调用
const { data, error, isLoading } = useGetElementQuery(你的元素ID);

这样就能正确获取到传入的元素ID，从Firebase数据库拿到对应数据了。

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