Next.js中TipTap协作功能无法正常工作的问题求助

核心问题 #

你的代码存在两个关键问题，导致同凭证的会话无法实现协作：

1. CollabProvider 初始化时机错误：创建TiptapCollabProvider的useEffect依赖为空数组，仅在组件挂载时执行一次。但此时token和documentID可能还未完成更新（比如URL参数处理、异步获取token的过程），导致provider使用的是初始空值或默认ID，而非正确的协作凭证。
2. 强制覆盖编辑器内容：最后一个useEffect会在editor初始化时强制设置固定内容，直接覆盖从协作服务同步过来的文档内容，导致其他会话的修改无法显示。

修复步骤 #

1. 修正CollabProvider的依赖与初始化逻辑

将创建provider的useEffect依赖改为[token, documentID, doc]，确保当token或documentID更新时，重新创建provider并连接到正确的协作文档，同时移除无效的setToken操作：

useEffect(() => {
  // 仅当token和documentID都有效时创建provider
  if (!token || !documentID) return;

  const provider = new TiptapCollabProvider({
    name: documentID,
    appId: 'rm8441ko',
    token: token,
    document: doc,
  });

  return () => {
    provider.destroy();
  };
}, [token, documentID, doc]);

2. 移除强制重置内容的逻辑

删除会在editor初始化时设置固定内容的useEffect，避免覆盖协作同步的内容。如果需要默认初始内容，建议仅在文档首次创建时执行（可通过协作服务钩子或判断文档是否为空实现）：

// 移除这段代码
// useEffect(() => {
//   editor?.commands.setContent(
//     '<h1>Content</h1>'
//   );
// }, [editor]);

3. 优化state初始化逻辑

确保documentID初始值正确，避免默认uniqueID在URL参数存在时被错误使用：

const [documentID, setDocumentID] = useState<string>(URL_ID || '');

额外建议 #

• 在loading状态判断中增加对token和documentID的校验，确保只有当两个值都有效时才渲染编辑器。
• 检查协作服务的权限配置，确认相同token和documentID的会话被允许加入同一协作房间。

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