Next.js 14 + Clerk v5：如何获取博客作者用户名而非当前用户

• 第一步：存储博文时记录作者ID
  用户发布博文时，用useUser()或currentUser()拿到当前登录用户的id，将这个id作为authorId字段，和博文内容、标题等信息一起存入数据库（比如Prisma、MongoDB）。示例代码：

  import { useUser } from '@clerk/nextjs';
  
  async function publishPost(content: string) {
    const { user } = useUser();
    if (!user) return;
    // 调用后端API存储博文
    await fetch('/api/posts', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        content,
        authorId: user.id // 存入作者的Clerk用户ID
      })
    });
  }
  

• 第二步：渲染博文时关联作者信息
  从数据库获取博文数据时，同时取出对应的authorId，再通过Clerk的服务端方法clerkClient.users.getUser()，用authorId获取作者的完整信息，提取用户名即可。
  示例（Next.js Server Component）：

  import { clerkClient } from '@clerk/nextjs/server';
  import { prisma } from '@/lib/prisma'; // 假设使用Prisma操作数据库
  
  async function getPostWithAuthor(postId: string) {
    const post = await prisma.post.findUnique({
      where: { id: postId },
      select: {
        content: true,
        authorId: true
      }
    });
    if (!post) return null;
    // 通过authorId获取作者信息
    const author = await clerkClient.users.getUser(post.authorId);
    return {
      ...post,
      authorUsername: author.username
    };
  }
  
  export default async function PostPage({ params }: { params: { postId: string } }) {
    const post = await getPostWithAuthor(params.postId);
    if (!post) return <div>博文不存在</div>;
    return (
      <article>
        <div>{post.content}</div>
        <footer>作者：{post.authorUsername}</footer>
      </article>
    );
  }
  

• 关键注意点

  • 确保Clerk控制台的API密钥配置了读取用户信息的权限；
  • 若需在Client Component中获取作者信息，建议通过自有后端API封装Clerk的getUser方法，避免客户端暴露敏感密钥。

内容的提问来源于stack exchange，提问作者Joodi