新建富文本編輯器，并編寫save方法如下：

edit方法：

export default function Edit({ attributes, setAttributes }) {return (<><div { ...useBlockProps() }><RichTexttagName='p'onChange={ (value) => setAttributes({ noteContent: value })}value={attributes.noteContent}placeholder='輸入你的內容...'></RichText><div>自定義的按鈕</div></div></>);
}

save方法：

import { useBlockProps } from '@wordpress/block-editor';export default function save({ attributes }) {const { noteContent } = attributes;return (<div { ...useBlockProps.save() }>{ noteContent }</div>);
}

看上去很好理解，將RichText標簽解析成div，將內容保存在div內部。

報錯

此時保存刷新：

報錯內容：

區塊包含未預料的或無效的內容。

此時打開控制臺能夠看到報錯的log：

Content generated by `save` function:<div class="wp-block-ht-ht-note">&lt;div class="wp-block-ht-ht-note">測試&lt;/div></div>Content retrieved from post body:<div class="wp-block-ht-ht-note">測試</div>

現象

出現這種報錯通常原因是save方法和edit方法結果沒有對上。本來是一個挺常見的bug。通常需要簡單修改一下就能正常使用了。

但這次有些不太一樣。仔細觀察報錯日志：

save()方法保存的內容：
<div class="wp-block-ht-ht-note">
<div class="wp-block-ht-ht-note">
測試
</div>
</div>edit()方法保存的內容：
<div class="wp-block-ht-ht-note">
測試
</div>

也就是save()方法保存了兩次{ ...useBlockProps() }

原因

保存了兩次，我們要搞清楚是從哪里來的。

第一次的div

這個很好理解，畢竟save方法使用了<div { ...useBlockProps.save() }>。使用這種方式就會解析成<div class="wp-block-ht-ht-note">

第二次的div

剩下的那也就能正常推斷出來了：除了save方法使用的，就只可能是{noteContent}中本身的內容了。通過<div class="wp-block-ht-ht-note">&lt;div class="wp-block-ht-ht-note">測試&lt;/div></div>的轉義內容也能夠推斷出，{noteContent}是包含著一個<div class="wp-block-ht-ht-note">的

解決方案

知道原因就好解決了，既然保存時就帶上了，那save()方法就不需要再添加一次了。
修改save()方法：

export default function save({ attributes }) {const { noteContent } = attributes;return (<>{ noteContent }</>);
}

保存刷新，解決。