Next.js 13 服务端Props传递至客户端组件失败问题求助

尝试在Next.js 13中将服务端声明的变量传递给带"use client"指令的客户端组件时，出现两个问题：

• 客户端组件中console.log(data)输出undefined
• 抛出错误：SyntaxError: Unexpected token u in JSON at position 0

（注：示例中的组件无需放在客户端，仅作为问题演示）

服务端代码 #

import Props from "./Components/props"

export default function Home() {
  const x = 'hello'

  return (
    <main>
      <Props data = {x} />
      <p>Hello</p>
    </main>
  )
}

客户端代码（错误版本） #

"use client"

export default function Props({ data }) {
    console.log(data);

    return (
        <p>Test</p>
      );
    };

问题原因 #

客户端组件中的"use client"指令被写成了HTML转义后的"use client"，Next.js无法识别这种格式的指令，导致组件没有被正确标记为客户端组件。服务端传递的Props无法被正确序列化处理，最终引发undefined和JSON解析错误。

解决方案 #

将客户端组件中的转义引号替换为正常的双引号，确保"use client"指令格式正确：

"use client"

export default function Props({ data }) {
    console.log(data);

    return (
        <p>Test</p>
    );
};

修改后，服务端变量x会正常传递到客户端组件，console.log(data)将输出hello，报错也会消失。

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