Contentful富文本无序列表渲染为P标签无法显示项目符号问题

问题原因&修正方案 #

• 配置位置错误：BLOCKS.LIST_ITEM属于块级节点范畴，必须放在renderNode字段下配置，你当前错误将其放在了仅用于处理行内标记（加粗、斜体等）的renderMark字段中，配置完全不生效。
• 缺失父级列表节点配置：列表结构由外层的有序/无序列表块和内层的列表项组成，你还需要补充BLOCKS.UL（无序列表）、BLOCKS.OL（有序列表）两个块级节点的渲染规则，缺少这两个配置时渲染器不会生成对应的ul/ol标签，自然不会显示项目符号。
• 外层冗余标签错误：不需要手动在renderRichText方法外嵌套ul和li标签，富文本渲染器会自动根据Contentful返回的结构生成正确的列表层级，手动嵌套会导致HTML结构异常。

修正后的代码示例 #

// 先确认从正确的包引入BLOCKS
import { BLOCKS } from "@contentful/rich-text-types"

const options = {
  renderNode: {
    // 配置无序列表外层
    [BLOCKS.UL]: (children) => <ul className="leading-8">{children}</ul>,
    // 可选：如果需要支持有序列表也加这个配置
    [BLOCKS.OL]: (children) => <ol className="leading-8">{children}</ol>,
    // 配置列表项
    [BLOCKS.LIST_ITEM]: (children) => 
      <li style={{ fontSize: '60px', fontFamily: 'Montserrat' }}>{children}</li>,
  },
};

// 渲染时直接调用即可，不需要外层套ul/li
{renderRichText(data.contentfulReports.fullDescription, options)}

额外确认点 #

检查你项目中安装的富文本渲染包是否和当前用法匹配，Gatsby项目对应gatsby-source-contentful/rich-text导出的renderRichText，原生Contentful项目对应@contentful/rich-text-react-renderer导出的方法即可。

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