NextJS 13项目中disqus-react评论跨文章显示问题解决

问题现象 #

在NextJS项目中使用disqus-react时出现异常：单篇博客的评论会同步显示在所有博客文章中。例如创建三篇示例博客Post1、Post2、Post3，在Post1中添加的评论，访问Post2和Post3时也能看到相同内容。

组件代码（DisqusCommentBlock） #

"use client"
import { DiscussionEmbed } from 'disqus-react';
import React from 'react';

interface DisqusCommentBlockProps {
  shortname?: string;
  config?: {
    url?: string;
    identifier?: string;
    title?: string;
    language?: string;
  }
}

const DisqusCommentBlock: React.FC<DisqusCommentBlockProps> = ({ shortname, config }) => { 
  return (
    <div>
      <DiscussionEmbed
        shortname={shortname}
        config={{
          url: config.url,
          identifier: config.identifier,
          title: config.title,
          language: config.language || 'en_EN' 
        }}
    />
    </div>
  )
}

export default DisqusCommentBlock;

初始调用代码 #

<Disqus
    shortname="novice_programmer"
    config={{
      url: process.env.SITE_URL + 'blog/' + slug,
      identifier: blogPost.identifier,
      title: blogPost.title,
      language: 'en' 
    }}
/>

问题原因 #

Disqus通过identifier字段作为页面评论区的唯一标识，以此区分不同页面的评论数据。初始代码中使用的blogPost.identifier字段值并非全局唯一（可能所有文章的该字段值重复，或字段本身未正确赋值），导致Disqus将所有博客页面识别为同一个评论区载体，进而共享评论内容。

解决方法 #

将identifier替换为全局唯一的文章标识，比如文章的slug（slug本身是为URL设计的唯一字符串，天然适配Disqus的标识需求），确保每篇文章的评论区都有独立的唯一标识。

修改后的调用代码 #

<Disqus
    shortname="novice_programmer"
    config={{
      url: process.env.SITE_URL + 'blog/' + slug,
      identifier: slug,
      title: blogPost.title,
      language: 'en' 
    }}
/>

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