Typescript React函数组件使用hooks获取Ag-Grid的gridApi报错如何解决

云上老周

2026-10-17

报错根源

你当前的TS报错是类型推断错误导致的：你给useState传入的初始值是() => {}，TS会自动推断gridApi的类型为() => void，自然识别不到ag-grid专属的API方法。

优先方案：使用`useRef`存储实例（完全符合不需要`useState`存函数的要求）

useRef存储可变值不会触发组件重渲染，是存储第三方实例/API的最优选择，适配TS的写法如下：

先引入ag-grid的官方类型定义：

// 社区版用这个，企业版替换成'ag-grid-enterprise'即可
import type { GridApi } from 'ag-grid-community';

定义ref存储gridApi：

const gridApiRef = React.useRef<GridApi | null>(null);

初始化时赋值：

const onGridReady = (params) => {
  gridApiRef.current = params.api;
}

调用API时增加空值判断，避免组件未初始化时报错：

const handleTableFilter = (filterText: string) => {
  gridApiRef.current?.setQuickFilter(filterText);
}

备选方案：修正`useState`的类型注解

如果确实需要用useState存储，只需要给useState显式标注类型，初始值设为null即可：

import type { GridApi } from 'ag-grid-community';

// 显式指定类型，不要传空函数作为初始值
const [gridApi, setGridApi] = React.useState<GridApi | null>(null);

const onGridReady = (params) => {
  setGridApi(params.api);
}

// 调用时同样加可选链判空
const handleTableFilter = (filterText: string) => {
  gridApi?.setQuickFilter(filterText);
}