自定义WPBakery元素保存时报Cannot read properties of null (reading 'length')错误

你遇到的这个报错是WPBakery处理param_group类型参数时的典型空值异常，具体修复方案如下：

报错根源 #

JS报错Uncaught TypeError: Cannot read properties of null (reading 'length')是因为你定义的listing_item参数组存在空值字段，WPBakery前端保存逻辑遍历参数属性时，尝试读取null值的length属性触发异常。
前端展示正常是因为你在输出时做了(array)强转和empty判断，自动过滤了无效项，没有触发PHP错误，但是WPBakery的JS保存逻辑不会跳过空值，所以仅在保存时报错。

修复步骤 #

1. 修改短码输出逻辑，增加空值兼容 #

找到output_html方法中遍历listing_item的代码段，将原逻辑：

<?php
$icon = $item['icon_' . $item['type']];
vc_icon_element_fonts_enqueue($item['type']);
?>

替换为增加空值判断的版本：

<?php
// 兼容type字段空值，默认值和你vc_map中定义的图标库默认值保持一致即可
$item_type = isset($item['type']) ? $item['type'] : 'fontawesome';
$icon = isset($item['icon_' . $item_type]) ? $item['icon_' . $item_type] : '';
if ($item_type) {
    vc_icon_element_fonts_enqueue($item_type);
}
?>

同时修改icon输出逻辑，增加空值判断：

<?php if ($item['upload'] == 'icon' && !empty($icon)): ?>
    <span class="icon"><span class="<?php echo esc_attr($icon) ?>"></span></span>
<?php elseif ($item['upload'] == 'image' && isset($item['image'])): ?>
    <span class="image"><?php echo wp_get_attachment_image($item['image'], 'full'); ?></span>
<?php endif; ?>

2. 完善vc_map参数配置，给所有字段加默认值 #

在你注册azirspares_listing短码的vc_map配置中，找到listing_item参数组的params配置，给每个字段设置默认值，示例如下：

array(
    'type' => 'param_group',
    'param_name' => 'listing_item',
    'params' => array(
        // 给type字段加默认值
        array(
            'type' => 'dropdown',
            'param_name' => 'type',
            'std' => 'fontawesome', // 替换为你实际使用的默认图标库
            // 其余原有配置保留
        ),
        // 给upload字段加默认值
        array(
            'type' => 'dropdown',
            'param_name' => 'upload',
            'std' => 'icon',
            // 其余原有配置保留
        ),
        // 所有其他字段都加std默认值，空字段设为''即可
    ),
    // 其余原有配置保留
),

修改完成后清空缓存再测试保存即可解决报错。

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