NextJS 13 App路由反模式：评论功能异常问题排查

问题1：页面顶部添加'use server'后出现「无法将事件监听器传递给函数」错误 #

原因 #

App Router 中页面组件默认是服务器组件，但在组件顶部添加'use server'会将整个组件标记为服务器组件，此时你传递给客户端组件AddComment的addComment函数会被当作普通服务端函数处理——客户端组件无法接收服务器组件直接传递的函数（服务端代码无法序列化传递到客户端）。

另外，'use server'的正确用法是：要么在单独文件中定义独立的服务器Action，要么在组件内部的目标函数顶部添加，而非整个组件顶部。

解决方法 #

移除页面组件顶部的'use server'，仅保留addComment函数内部的'use server'声明，这样addComment会被正确识别为服务器Action，Next.js会自动处理其与客户端组件的通信逻辑。

问题2：video变量声明在组件内时，提交按钮触发异常 #

原因 #

1. 你原本将video声明为模块级变量，这是严重错误的实践：模块级变量在服务端是全局共享的，多用户请求会复用该变量，导致数据污染。
2. 当把video移到组件内部后，服务器ActionaddComment中引用的video是组件渲染时的闭包变量，但服务器Action是在表单提交的独立请求中执行的，此时闭包中的video已失效；同时直接修改video变量无法更新页面——服务器Action执行在独立上下文，必须通过revalidatePath触发页面重新渲染。

解决方法 #

步骤1：修正video变量的声明位置

删除模块级的let video: Video | null = null;，在组件内部正常声明：

const VideoPage: NextPage<Props> = async ({ params }) => {
  if(!params.id) {
    redirect('/');
  }

  // 组件内部声明video，每个请求独立实例
  const video = await videosDao.getVideoWithCommentsById(params.id);

  if(!video) {
    redirect('/');
  }
  // ... 其余代码
}

步骤2：修改服务器Action逻辑

移除对组件内video变量的直接修改，仅保留revalidatePath触发页面重新获取数据：

const addComment = async (data: FormData) => {
  'use server';

  let headersList = headers();
  let ip = headersList.get('x-real-ip') ?? headersList.get('x-forwarded-for') ?? headersList.get('remote-addr');

  let commentContent = data.get('comment') as string;
  let nickname = data.get('nickname') as string;
  let videoId = params.id;
  let fingerprint = cookies().get('clientId')?.value;

  if(!commentContent || !nickname || !videoId || !fingerprint) {
    return false;
  }

  let comment: Partial<Comment> = {
    comment: commentContent,
    nickname: nickname,
    videoId: videoId,
    fingerprint: fingerprint,
    ip: ip ?? '',
  }

  try{
    let inserted = await commentsDao.insertComment(comment);
    if(!inserted) return false;

    // 移除无效的闭包变量修改：video?.comments?.push(comment as Comment);
    // 重新查询视频信息，确保路由路径正确
    const updatedVideo = await videosDao.getVideoById(videoId);
    if (updatedVideo) {
      revalidatePath(`/video/${videoId}/${updatedVideo.name}`);
    } else {
      revalidatePath(`/video/${videoId}`);
    }
  }catch(e) {
    console.error(e);
  }
}

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