React-WP Gutenberg区块保存函数崩溃：无效Hook调用错误

出现Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.错误的核心原因是：Gutenberg的save函数是纯静态渲染函数，不允许使用任何React Hooks（包括内部依赖Hooks的组件）。

React-Bootstrap的Carousel组件内部依赖React Hooks实现交互逻辑，而Gutenberg的save函数仅负责生成静态HTML标记，供网站前端渲染使用，它本身并非动态函数组件，无法执行Hook相关逻辑。Edit组件是编辑器内的动态渲染组件，因此可以正常使用Carousel，但Save组件不行。

解决方案：在Save函数中输出静态Bootstrap轮播结构 #

放弃在Save函数中使用React-Bootstrap的Carousel组件，转而输出Bootstrap轮播对应的原生HTML结构（带Bootstrap类名），让前端页面通过加载Bootstrap的JS实现交互。

修改后的save.jsx代码示例：

import { useBlockProps } from '@wordpress/block-editor';

const Save = ( props ) => {
  const { attributes: { mediaURLfirst, mediaURLsecond, mediaURLthird} } = props;
  const blockProps = useBlockProps.save();

  return (
    <div {...blockProps}>
      <div className="carousel slide" data-bs-ride="carousel">
        <div className="carousel-inner">
          {/* 第一个轮播项默认激活 */}
          <div className="carousel-item active">
            <img src={mediaURLfirst} className="d-block w-100" alt="First slide" />
          </div>
          <div className="carousel-item">
            <img src={mediaURLsecond} className="d-block w-100" alt="Second slide" />
          </div>
          <div className="carousel-item">
            <img src={mediaURLthird} className="d-block w-100" alt="Third slide" />
          </div>
        </div>
        {/* 轮播控制按钮 */}
        <button className="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
          <span className="carousel-control-prev-icon" aria-hidden="true"></span>
          <span className="visually-hidden">上一张</span>
        </button>
        <button className="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
          <span className="carousel-control-next-icon" aria-hidden="true"></span>
          <span className="visually-hidden">下一张</span>
        </button>
      </div>
    </div>
  );
};
export default Save;

额外注意事项 #

1. 加载Bootstrap JS：需确保网站前端页面已加载Bootstrap的JavaScript文件，可通过WordPress的wp_enqueue_script函数在主题或插件中注册并加载。
2. Save函数限制：Gutenberg的Save函数必须返回纯静态JSX，不能包含任何动态逻辑、Hook调用或依赖Hook的组件，所有交互逻辑应放在Edit组件或前端页面的JS中处理。
3. 样式一致性：已在index.jsx中导入Bootstrap的CSS，前端页面会自动应用轮播样式，无需额外处理。

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