Next.js中TinyMCE Comments加载时不显示已有评论问题

在Next.js应用中集成TinyMCE Comments功能时，遇到加载编辑器时已创建的评论无法显示的问题。已按照文档要求实现tinycomments_fetch回调，且API返回数据完全符合指定格式，但旧评论仍不显示，仅新创建的评论能正常展示。

文档指定的回调数据格式 #

type tinycomments_fetch = {
    conversations: {
        [conversationUid: string]: {
            uid: string,
            comments: [
                {
                    uid: string,
                    author: string,
                    authorName?: string,
                    authorAvatar?: string,
                    content: string,
                    createdAt: string,
                    modifiedAt: string
                }
            ]
        }
    }
}

已尝试的操作 #

• API返回数据格式完全匹配文档要求（已通过控制台日志验证）
• 新创建的评论可正常显示
• 已实现tinycomments_fetch回调用于获取所有对话，代码如下：

tinycomments_fetch: (conversationUids: string[], done: (data: tinycomments_fetch) => void, fail: Function) => {
    fetch(`/api/communities/${communityId}/posts/${postId}/comments/conversations`, {
        method: 'GET',
        headers: { 'Content-Type': 'application/json' }
    })
        .then(response => response.json())
        .then((data: tinycomments_fetch) => {
            console.log('All conversations:', data);
            done(data);
        })
        .catch(err => fail(err));
}

排查方向建议 #

1. 检查对话UID与编辑器内容的关联：确保返回的conversationUid与编辑器内容中标记评论的节点UID完全匹配。TinyMCE需要通过UID将对话绑定到对应的文本片段，若UID不匹配，评论无法定位显示。
2. 验证时间格式：确认createdAt和modifiedAt字段的时间格式符合ISO 8601标准（如"2024-05-20T12:34:56Z"）。TinyMCE对时间格式有严格要求，格式错误可能导致评论渲染失败。
3. 检查回调参数处理：注意tinycomments_fetch的第一个参数conversationUids，如果编辑器初始化时需要加载特定对话，API是否支持根据传入的UID列表返回对应数据？当前代码直接获取所有对话，若TinyMCE在初始化时传入了特定UID列表，而API未过滤返回，可能导致匹配问题。
4. 确认TinyMCE初始化时机：在Next.js中，确保TinyMCE是在组件挂载完成后（如useEffect钩子中）初始化，避免因DOM未就绪导致评论节点无法被正确识别。
5. 检查评论内容的HTML兼容性：确认返回的content字段内容是合法的HTML片段，若包含未闭合标签或非法字符，可能导致评论渲染异常。

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