NextJS + TypeScript 与 MongoDB 中的 authOptions 问题

Question

构建代码时遇到困难。认为这与 authOptions 有关。我可以毫无问题地运行 npm run dev，但无法构建它 npm run build。

这是我的“route.js”文件，位于“app/api/auth/[...nextauth]/route.js”

import { connectMongoDB } from "@/lib/mongodb";
import User from "@/models/user";
import NextAuth from "next-auth/next";
import CredentialsProvider from "next-auth/providers/credentials";
import bcrypt from "bcryptjs";

export const authOptions = {
  providers: [
    CredentialsProvider({
      name: "credentials",
      credentials: {},

      async authorize(credentials) {
        const {email, password} = credentials;

        try {
          await connectMongoDB();
          const user = await User.findOne({ email });
          
          if (!user) {
            return null;
          }

          const passwordsMatch = await bcrypt.compare(password, user.password);

          if (!passwordsMatch) {
            return null;
          }

          return user;
        } catch (error) {
          console.log("Error: ", error);
        }
      },
    }),
  ],
  session: {
    strategy: "jwt",
  },
  secret: process.env.NEXTAUTH_SECRET,
  pages:{
    signIn: "/login",
  },
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST }

我在代码中使用它来获取会话状态，以根据用户是否登录来显示不同的文本。

“app/components/AboutPage.tsx”中的“AboutPage.tsx”文件

import { authOptions } from "@/app/api/auth/[...nextauth]/route";

export default async function AboutPage() {
  const session = await getServerSession(authOptions);

然后在这里使用它

{!session && <Link href="/login" className="links">Login</Link>}
{session && <Link href="/dashboard"><span style = {{ fontWeight: 700}} className="links">Welcome, {session?.user?.name}</span></Link>}

我收到错误： 属性“authOptions”与索引签名不兼容。 类型 '{ 提供者：CredentialsConfig<{}>[];会话：{ 策略：字符串； };秘密：字符串|不明确的;页面：{ 登录：字符串； }; }' 不可分配给类型 'never'。

我尝试将route.js文件转换为route.ts，但遇到了更多问题。

Answer 1

您似乎在代码中遇到了 TypeScript 类型错误。您提供的错误消息表明类型系统在处理 authOptions 对象时遇到问题。让我们解决这个问题。

首先，确保 TypeScript 理解您的 authOptions 对象的形状。您可以显式声明其类型以避免任何类型推断问题。以下是 route.js 文件的修改版本，其中显式键入 authOptions：

import { connectMongoDB } from "@/lib/mongodb";
import User from "@/models/user";
import NextAuth from "next-auth/next";
import CredentialsProvider from "next-auth/providers/credentials";
import bcrypt from "bcryptjs";

interface MyAuthOptions {
  providers: any[]; // Adjust this type according to the actual type of providers
  session: {
    strategy: string;
  };
  secret: string | undefined;
  pages: {
    signIn: string;
  };
}

export const authOptions: MyAuthOptions = {
  providers: [
    CredentialsProvider({
      name: "credentials",
      credentials: {},

      async authorize(credentials) {
        const { email, password } = credentials;

        try {
          await connectMongoDB();
          const user = await User.findOne({ email });

          if (!user) {
            return null;
          }

          const passwordsMatch = await bcrypt.compare(password, user.password);

          if (!passwordsMatch) {
            return null;
          }

          return user;
        } catch (error) {
          console.log("Error: ", error);
        }
      },
    }),
  ],
  session: {
    strategy: "jwt",
  },
  secret: process.env.NEXTAUTH_SECRET,
  pages: {
    signIn: "/login",
  },
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

在此版本中，我创建了一个接口 MyAuthOptions，它显式定义了 authOptions 的结构。如有必要，请根据您的实际数据调整类型。

现在，让我们修复 AboutPage.tsx 文件中 authOptions 的使用：

import { authOptions } from "@/app/api/auth/[...nextauth]/route";
import { getServerSession } from "next-auth/react";

export default async function AboutPage() {
  const session = await getServerSession({ req, res });

  return (
    <div>
      {!session && <Link href="/login" className="links">Login</Link>}
      {session && <Link href="/dashboard"><span style={{ fontWeight: 700 }} className="links">Welcome, {session?.user?.name}</span></Link>}
    </div>
  );
}

确保从 next-auth/react 正确导入 getServerSession，并在需要时提供 req 和 res 对象。

这些更改应该有助于解决您遇到的 TypeScript 错误。