React-Admin数据提供者TS错误及React-Hook-Form导入问题求助

一、解决params.pagination的属性不存在错误 #

错误提示Property 'page' does not exist on type 'PaginationPayload | undefined'，原因是React Admin的DataProvider类型定义中，params.pagination被标记为可选类型（PaginationPayload | undefined），直接解构会触发类型检查错误。

提供三种解决方式，按需选择：

1. 非空断言（适用于确定pagination一定存在的场景）
   在解构时添加!断言其不为undefined：

   const {page, perPage} = params.pagination!;
   

2. 提供默认值（推荐，兼容无分页的情况）
   使用空值合并运算符??给pagination设置默认空对象，同时给page和perPage设置合理默认值：

   const {page = 1, perPage = 10} = params.pagination ?? {};
   

3. 条件判断处理
   先判断pagination是否存在，再解构赋值：

   let page = 1;
   let perPage = 10;
   if (params.pagination) {
     ({page, perPage} = params.pagination);
   }
   

注意：getManyReference方法中也存在同样的问题，需要执行相同修改。

二、解决react-hook-form的FieldPath导入错误 #

错误提示Module '"react-hook-form"' has no exported member 'FieldPath'，核心原因是版本不兼容：

• FieldPath是react-hook-form v7及以上版本新增的类型，若使用v6或更低版本，会出现该错误。

解决步骤：

1. 升级react-hook-form到v7+
   执行命令升级依赖：

   npm install react-hook-form@latest
   # 或使用yarn
   yarn add react-hook-form@latest
   

2. 若无法升级，调整类型使用
   若必须保留旧版本：

   • 不需要FieldPath则直接删除相关导入和代码；
   • 需要则查看对应版本的类型文档，使用旧版本的替代方案（比如v6中可直接用字符串类型替代）。

3. 确认导入语句正确性
   升级到v7+后，确保导入语句正确：

   import { FieldPath } from "react-hook-form";
   

修改后的数据提供者示例片段 #

以getList为例，修改后的代码：

getList: async (resource, params) => {
  const {page = 1, perPage = 10} = params.pagination ?? {};
  const {field, order} = params.sort;

  const response = await httpsClient(`${url}/${resource}?offset=${page}&limit=${perPage}&sort_by=${field}&order_by=${order}`);

  return {
    data: response.json,
    total: parseInt(response.headers.get("x-total-count") || '', 10),
  };
},

内容的提问来源于stack exchange，提问作者Pandiri Veeresh Kumar