dispatch('core')返回null：WordPress自定义块添加实体报错求助

核心问题 #

你碰到的dispatch('core')返回null，本质是代码调用时机太早——WordPress的core数据存储还没完成初始化，就直接执行了addEntities操作。另外你代码里把import { dispatch } from '@wordpress/data'放在了代码中部，这不符合ES模块的规范（import必须放在文件最顶部）。

修复步骤 #

1. 统一调整import位置到文件顶部 #

所有import语句必须放在文件最开头，这是ES模块的强制要求：

import { registerBlockType } from '@wordpress/blocks';
import { dispatch } from '@wordpress/data';
import { addAction } from '@wordpress/hooks';

import './style.scss';

import Edit from './edit';
import metadata from './block.json';

2. 延迟调用addEntities，等待存储初始化完成 #

用WordPress的pluginsLoaded钩子确保core存储加载完成后再执行操作，同时加个判断避免再次出错：

addAction( 'pluginsLoaded', 'amilia/v1/add-entities', () => {
    const coreDispatch = dispatch( 'core' );
    if ( coreDispatch ) {
        coreDispatch.addEntities( [
            {
                name: 'programs',
                kind: 'amilia/v1',
                baseURL: 'amilia/v1/programs',
            },
        ] );
    }
} );

3. 完整修正后的src/index.js代码 #

import { registerBlockType } from '@wordpress/blocks';
import { dispatch } from '@wordpress/data';
import { addAction } from '@wordpress/hooks';

import './style.scss';

import Edit from './edit';
import metadata from './block.json';

registerBlockType( metadata.name, {
    edit: Edit,
} );

addAction( 'pluginsLoaded', 'amilia/v1/add-entities', () => {
    const coreDispatch = dispatch( 'core' );
    if ( coreDispatch ) {
        coreDispatch.addEntities( [
            {
                name: 'programs',
                kind: 'amilia/v1',
                baseURL: 'amilia/v1/programs',
            },
        ] );
    }
} );

可选方案：在Edit组件内调用（仅限区块关联实体） #

如果这个实体只和当前区块相关，也可以把逻辑放到Edit.js组件里，用useEffect钩子确保组件挂载时存储已就绪：

// Edit.js
import { useEffect } from '@wordpress/element';
import { dispatch } from '@wordpress/data';

export default function Edit( props ) {
    useEffect( () => {
        const coreDispatch = dispatch( 'core' );
        if ( coreDispatch ) {
            coreDispatch.addEntities( [
                {
                    name: 'programs',
                    kind: 'amilia/v1',
                    baseURL: 'amilia/v1/programs',
                },
            ] );
        }
    }, [] );

    // 原有组件内容
    return (
        <div>
            {/* 区块编辑界面内容 */}
        </div>
    );
}

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