Typescript 如何正确调用创建的类型

在您的Profile组件中，您没有调用getUser函数.您只是将函数本身赋值给user变量.更新它以调用该函数，如下所示:

import { getUser } from "../../../@types/UserType";
import { ClientImage } from "../../../components/ClientImage";
import DevComponent from "../../../components/DevComponents";

export default function Profile() {
  const user = getUser(); // Call the function
  console.log("usuario:", user);
  
  if (user) {
    return (
      <div>
        <h1>Profile Page</h1>
        <p>Name: {user.name}</p>
        <p>Email: {user.email}</p>
        <p>Image Profile: {user.imageProfile}</p>
        <ClientImage />
        <DevComponent />
      </div>
    );
  } else {
    return <p>Loading...</p>; // Handle the case when user is not available yet
  }
}

在您的getUser函数中，您试图从UserType接口中构造属性，但该函数不接受任何参数.相反，您应该从函数中删除参数，并直接返回User对象:

"use client"
import { useSession } from "next-auth/react";

interface UserType {
  name: string;
  email: string;
  imageProfile: string;
}

const getUser = (): UserType | null => {
  const { data: session } = useSession();
  if (session) {
    return {
      name: session.user?.name || "",
      email: session.user?.email || "",
      imageProfile: session.user?.jpegPhoto || ""
    };
  }
  return null;
};

export { getUser };

确保使用空合并运算符(||)或可选链接(?.)处理属性可能为undefined的情况.

通过这些更改，您应该能够获取User对象并在您的Profile组件中显示信息.

For New Error！

看起来您正面临一个名为"无效的钩子调用"的错误.当试图在功能组件外部或在不允许挂钩的上下文中使用react 挂钩(在本例中为useSession)时，通常会出现此错误.

要解决此问题，

UserType.ts:个

// UserType.ts
import { useSession } from "next-auth/react";

interface UserType {
  name: string;
  email: string;
  imageProfile: string;
}

const getUser = (): UserType | null => {
  const { data: session } = useSession();
  if (session) {
    return {
      name: session.user?.name || "",
      email: session.user?.email || "",
      imageProfile: session.user?.jpegPhoto || ""
    };
  }
  return null;
};

export { getUser };

Profile.tsx:

// Profile.tsx
import { ClientImage } from "../../../components/ClientImage";
import DevComponent from "../../../components/DevComponents";
import { useSession } from "next-auth/react";
import { getUser } from "../../../@types/UserType";

export default function Profile() {
  const { data: session } = useSession();
  const user = getUser(session);

  if (user) {
    return (
      <div>
        <h1>Profile Page</h1>
        <p>Name: {user.name}</p>
        <p>Email: {user.email}</p>
        <p>Image Profile: {user.imageProfile}</p>
        <ClientImage />
        <DevComponent />
      </div>
    );
  } else {
    return <p>Loading...</p>;
  }
}

为了修复这个错误，我将useSession挂钩移到了Profile.tsx组件中允许的位置，并将会话数据传递给了getUser函数.这可确保您遵循Reaction挂钩的规则，并应解决"无效挂钩调用"错误.