TypeScript重构WordPress Gutenberg区块导入block.json报错无法注册

报错核心为TypeScript检测到你向要求传入string类型的参数位置，传入了整个block.json解析后的对象，问题大概率出现在区块注册的代码逻辑中，可按照以下顺序排查修复：

1. 修正区块注册函数的传参顺序 #

@wordpress/blocks提供的registerBlockType函数要求第一个参数为字符串格式的区块名称，第二个参数为区块配置对象。
检查你当前的注册代码，若为错误写法：

// 错误写法：把整个metadata对象作为第一个参数传入
registerBlockType(metadata, {
  edit: () => {},
  save: () => {}
})

修正为正确写法：

import { registerBlockType } from '@wordpress/blocks';
import metadata from './block.json';

// 正确写法：第一个参数传区块名称，第二个参数合并配置
registerBlockType(metadata.name, {
  ...metadata,
  edit: () => {},
  save: () => {}
});

2. 补充类型适配避免类型校验报错 #

如果调整传参后仍有类型不匹配的报错，可以通过类型断言匹配Gutenberg官方定义的区块配置类型：

import { registerBlockType, type BlockConfiguration } from '@wordpress/blocks';
import metadata from './block.json';

registerBlockType(
  metadata.name as string,
  metadata as BlockConfiguration
);

3. 调整导入写法或TS配置 #

如果出现json模块导入的报错，可依次尝试以下操作：

• 将导入写法替换为命名空间导入：import * as metadata from './block.json'
• 检查block.json是否在tsconfig.json的include覆盖范围内，如果文件存放在src目录外，需要更新include配置：

  "include": ["src/*", "block.json"]
  

• TypeScript版本高于4.7的环境下，可以添加导入断言明确模块类型：

  import metadata from './block.json' assert { type: 'json' };
  

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