在Next.js React博客集成Disqus评论组件时出现TypeError: Super expression must either be null or a function错误

看起来你遇到的这个错误在React/Next.js生态里挺常见的，尤其是集成第三方UI组件时容易踩坑。我帮你分析下核心原因，再给出针对性的解决方案：

核心原因分析 #

这个Super expression must either be null or a function错误，本质是React尝试渲染一个不是有效React组件的对象。在你用disqus-react的场景里，大概率是因为DiscussionEmbed组件依赖浏览器环境的API（比如window），即使加了"use client"，Next.js的预渲染逻辑还是可能在服务器端阶段尝试初始化它，导致组件没有被正确解析成React组件。

具体解决方案 #

我给你一步步修正代码，确保能解决问题：

1. 先修正Props命名冲突

你的组件参数({Post})和导入的Post接口重名了，虽然这不是当前错误的直接原因，但会导致后续逻辑混乱，先改掉：

// 把参数改成小写的post，明确区分类型定义和props变量
const DisqusComments = ({ post }: { post: Post }) => {
  // 后续代码统一用post.url、post.title
}

2. 用Next.js动态导入禁用SSR

disqus-react的DiscussionEmbed内部依赖浏览器专属API，改用Next.js的dynamic导入并禁用服务器端渲染，强制组件只在客户端加载：

"use client"

import dynamic from 'next/dynamic';
import { Post } from "@/app/lib/interface"
import React from "react"

// 动态导入DiscussionEmbed组件，仅在客户端环境初始化
const DiscussionEmbed = dynamic(() => 
  import('disqus-react').then(mod => mod.DiscussionEmbed),
  {
    ssr: false, // 禁用服务器端渲染
    loading: () => <div>加载评论区...</div> // 可选：加载时的占位符
  }
);

const DisqusComments = ({ post }: { post: Post }) => {
  const disqusShortname = "weeksagenda"

  // 修正URL：不能硬编码[slug]，用实际的post slug生成完整访问地址
  const disqusConfig = {
    url: `https://localhost:3000/post/${post.slug}`, // 上线后替换成你的真实域名
    identifier: post.url,
    title: post.title
  }

  console.log(disqusShortname, disqusConfig)

  return (
    <div>
      <DiscussionEmbed
        shortname={disqusShortname}
        config={disqusConfig}
      />
    </div>
  )
}

export default DisqusComments;

3. 额外检查项

• 确认你的Post接口确实包含url、title、slug字段，避免出现undefined导致的隐性问题；
• 核对Disqus后台设置的短名称weeksagenda是否完全正确，这是Disqus组件能正常加载的关键；
• 如果还是有问题，尝试升级disqus-react到最新版本，旧版本可能和React 18/Next.js 13+存在兼容性问题：

npm update disqus-react
# 或者用yarn
yarn upgrade disqus-react

为什么这样能解决问题？ #

通过dynamic导入并设置ssr: false，我们强制DiscussionEmbed组件只在客户端浏览器环境下加载和初始化，这样它依赖的window等浏览器API就能正常访问，组件也能正确被解析成React组件，从而避免了Super expression的错误。

备注：内容来源于stack exchange，提问作者blackheel