WordPress Gutenberg中使用TypeScript useSelect钩子获取core/editor的类型错误问题

问题场景 #

在WordPress Gutenberg编辑器开发中使用TypeScript，调用useSelect钩子获取core/editor模块的属性时出现类型错误。示例代码：

const featured = useSelect(
  (select) =>
    select('core/editor').getEditedPostAttribute('meta')[
      '_projects_featured'
    ],
  []
);

错误提示 #

Property 'getEditedPostAttribute' does not exist on type 'never'.

临时（不推荐）方案 #

可通过将core/editor实例断言为any类型绕过错误，但这完全违背TypeScript类型检查的初衷：

const editor: any = useSelect((select) => select('core/editor'));
const postAttribute = editor.getEditedPostAttribute();

已安装的类型依赖 #

package.json中相关依赖片段：

"dependencies": {
  "@types/wordpress__components": "^19.10.5",
  "@types/wordpress__core-data": "^2.4.5",
  "@types/wordpress__data": "^6.0.1",
  "@types/wordpress__edit-post": "^4.0.1",
  "@types/wordpress__editor": "^11.0.0",
  "@types/wordpress__element": "^2.14.1",
  "@types/wordpress__plugins": "^3.0.0",
  "@wordpress/data": "^8.0.0",
  "@wordpress/edit-post": "^7.0.0",
  "@wordpress/plugins": "^5.0.0"
}

解决方案 #

类型断言法 #

从@types/wordpress__editor导入EditorStore类型，将select('core/editor')断言为该类型，即可获得完整类型提示：

import { useSelect } from '@wordpress/data';
import type { EditorStore } from '@types/wordpress__editor';

const featured = useSelect(
  (select) => {
    const editorStore = select('core/editor') as EditorStore;
    return editorStore.getEditedPostAttribute('meta')['_projects_featured'];
  },
  []
);

泛型指定返回值类型 #

如果需要明确返回值类型，可给useSelect添加泛型参数强化类型约束：

import { useSelect } from '@wordpress/data';
import type { EditorStore } from '@types/wordpress__editor';

// 假设_projects_featured为布尔类型
const featured = useSelect<boolean | undefined>(
  (select) => {
    const editorStore = select('core/editor') as EditorStore;
    return editorStore.getEditedPostAttribute('meta')['_projects_featured'];
  },
  []
);

版本兼容性检查 #

确保@types/wordpress__editor与@wordpress/editor版本匹配，类型包版本滞后可能导致类型定义缺失。可尝试更新类型依赖到最新兼容版本：

npm update @types/wordpress__editor --save-dev

TypeScript开发Gutenberg的可行性 #

完全可行。尽管官方尚未推出专门的TypeScript文档，但社区维护的@types/wordpress__*系列类型包已覆盖绝大多数核心Gutenberg模块，类型定义较为完善。目前已有大量生产级插件和自定义区块采用TypeScript开发，WordPress官方也在逐步推进Gutenberg核心代码的TypeScript迁移，未来支持会更加完善。

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