NextJS报错：Objects are not valid as a React child 求助排查

错误根源 #

错误提示显示你尝试渲染的对象正是useAuthController钩子返回的完整对象（包含email、setEmail、password等属性），这意味着该对象被意外当作React子元素插入到了JSX中。结合你的代码，最可能的问题出在**FormText组件内部**。

排查与修复步骤 #

1. 检查FormText组件代码 #

打开@/components/Form/formtext.tsx文件，查找是否存在直接渲染对象/函数类型props的代码：

• 比如误写了{props}（直接渲染整个props对象）
• 或者误渲染了{setValue}（把状态更新函数当作子元素）
  这些操作都会触发React的「对象不能作为子元素」错误。

2. 修正FormText的渲染逻辑 #

FormText应该仅渲染合法的React子元素（文本、输入框等），状态更新函数（如setValue）应绑定到输入事件，而非直接渲染。以下是符合逻辑的示例：

"use client";
import { ChangeEvent } from "react";

type FormTextProps = {
  title: string;
  placeholder: string;
  value: string;
  setValue: (val: string) => void;
  type?: string;
};

export default function FormText({ 
  title, 
  placeholder, 
  value, 
  setValue, 
  type = "text" 
}: FormTextProps) {
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };

  return (
    <div className="flex flex-col gap-y-2">
      <label className="text-sm font-medium text-kilamanjaro">{title}</label>
      <input
        type={type}
        placeholder={placeholder}
        value={value}
        onChange={handleChange}
        className="border border-gray-300 rounded px-3 py-2"
      />
    </div>
  );
}

3. 额外排查：错误信息处理 #

如果确认FormText无问题，检查useAuthController的错误捕获逻辑：
当捕获到非FirebaseError的错误时，直接拼接error对象可能导致error状态包含非字符串内容。可以修改为：

// 替换原catch块中的else分支
else {
  console.error(error);
  // 提取错误信息或转为字符串
  setError(`Unexpected error occured : ${(error as Error).message || JSON.stringify(error)}`);
}

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