具有 auth0 的 NextJS 图像组件

Question

我正在尝试将 auth0 与 nextJS 集成，但遇到 next.js Image 组件的问题。首先我们看一下代码：

import Image from "next/image"
import { useUser } from "@auth0/nextjs-auth0"

export default function Profile() {
  const { user, error, isLoading } = useUser()

  if (isLoading) return <div>Loading...</div>
  if (error) return <div>{error.message}</div>

  return (
    user && (
      <div>
        <Image src={user.picture} alt={user.name} />
        <h2>{user.name}</h2>
        <p>{user.email}</p>
      </div>
    )
  )
}

这基本上是他们的示例 nextjs 集成的直接副本，除了我将 img 标记更改为 nextjs Image 组件。即，这个：<Image src={user.picture} alt={user.name} /> 而不是这个<img src={user.picture} alt={user.name} />。

但是，这导致了打字稿错误——如下图所示：

在我看来，nextjs 图像组件需要 string | StaticImport 类型，而 auth0 设置了 string | null | undefined 类型 - 因此类型冲突，我收到错误。

假设这是正确的，知道如何解决这个问题吗？或者，如果问题是其他问题 - 知道问题是什么以及如何解决？

谢谢。

Answer 1

似乎user.picture 是可选的（至少从打字稿的角度来看），这意味着它可能已设置或未设置，因此您需要处理未设置时会发生的情况。图片接受string或StaticImport类型，在你的情况下它似乎是string，不用担心另一个，但它不接受的是null或undefined，所以让我们摆脱那些。

我从错误消息中假设用户不能是 undefined 或 null，但只有 .picture 可以，所以在这种情况下我会这样修复它：

<Image src={user.picture ?? ''} alt={user.name ?? ''} />

如果值为空或未定义，则将其设置为空字符串。如果用户也可以是未定义的，那么同样的工作与添加更多?的微小变化：

<Image src={user?.picture ?? ''} alt={user?.name ?? ''} />