NextAuth与Next.js 13集成配置求助：解决环境变量类型错误及RootLayout参数问题

我来帮你一步步搞定这两个配置问题，都是App Router下用NextAuth容易踩的坑：

问题1：TypeScript环境变量类型错误 #

你遇到的Type 'string | undefined' is not assignable to type 'string'错误，是因为TypeScript默认认为process.env变量可能不存在，而FacebookProvider要求clientId和clientSecret必须是确定的字符串。

解决方案（两种方式，推荐第二种更严谨） #

方式1：非空断言（快速入门）

直接在变量后加!，告诉TypeScript这个变量一定存在：

import NextAuth from "next-auth"
import FacebookProvider from "next-auth/providers/facebook";

export const authOptions = {
  providers: [
    FacebookProvider({
      clientId: process.env.FACEBOOK_CLIENT_ID!,
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET!
    }),
  ],
}

export default NextAuth(authOptions)

⚠️ 注意：必须确保你的.env文件里已经正确配置了这两个变量，否则运行时会直接报错。

方式2：提前校验（更严谨）

先检查变量是否存在，不存在就抛出错误，这样TypeScript会自动推断后续变量为字符串类型：

import NextAuth from "next-auth"
import FacebookProvider from "next-auth/providers/facebook";

// 提前校验环境变量，避免运行时出错
if (!process.env.FACEBOOK_CLIENT_ID || !process.env.FACEBOOK_CLIENT_SECRET) {
  throw new Error("请配置FACEBOOK_CLIENT_ID和FACEBOOK_CLIENT_SECRET环境变量");
}

export const authOptions = {
  providers: [
    FacebookProvider({
      clientId: process.env.FACEBOOK_CLIENT_ID,
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET
    }),
  ],
}

export default NextAuth(authOptions)

问题2：RootLayout中pageProps不存在的错误 #

在Next.js 13的App Router里，RootLayout的props没有pageProps（这个是Pages Router的专属概念）。要给SessionProvider传递session，需要在服务器组件中主动获取session后再传给客户端组件。

解决方案 #

修改你的layout.tsx，改成异步组件并通过getServerSession获取session：

import { Outfit } from "@next/font/google";
import "../styles/globals.css";
import Header from "./components/Header/Header";
import { SessionProvider } from "next-auth/react";
import { getServerSession } from "next-auth/next";
import { authOptions } from "./api/auth/[...nextauth]/route"; // 注意路径要和你的[...nextauth].ts文件一致

// Outfit Font
const outfit = Outfit();

// 改成async函数，因为要await获取session
export default async function RootLayout({
  children,
}: { children: React.ReactNode; }) {
  // 在服务器组件中获取session（无需暴露给客户端）
  const session = await getServerSession(authOptions);

  return (
    <html>
      <head></head>
      <body lang="en" className={outfit.className}>
        {/* SessionProvider放在body内部，包裹需要用到session的组件 */}
        <SessionProvider session={session}>
          <Header />
          {children}
        </SessionProvider>
      </body>
    </html>
  );
}

关键注意点 #

1. 确保authOptions的导入路径正确：如果你的[...nextauth].ts在app/api/auth/[...nextauth]/route.ts，那路径就是./api/auth/[...nextauth]/route
2. RootLayout默认是服务器组件（不要加'use client'），才能调用getServerSession
3. SessionProvider要放在body标签内部，不要包裹整个html标签，避免客户端组件渲染冲突

完成这两个修改后，你的NextAuth配置应该就能正常运行了。

内容的提问来源于stack exchange，提问作者CTRL-In-Knowledge