在forwardRef组件中使用useId()出现htmlFor属性不匹配警告的解决

这个警告的本质是服务端渲染时生成的htmlFor属性值，和客户端hydrate后输入框的id值不匹配。

核心问题出在**forwardRef+渲染props（renderInput函数）的组合破坏了useId的稳定性**：

• useId生成的ID依赖组件在React树中的位置层级，服务端和客户端必须保持完全一致的组件结构，才能生成相同的ID。
• 当使用forwardRef时，组件的ref传递逻辑会改变React对组件实例的识别方式；再加上renderInput是外部传入的函数，服务端渲染时的函数执行上下文和客户端hydrate时存在差异，导致React在客户端重新生成了新的ID，和服务端的ID完全不匹配。
• 你在其他组件单独用useId没问题，是因为那些组件没有这种组合，服务端和客户端的组件树结构完全一致，useId能稳定生成相同的值。

以下是两种可行的解决方案，按推荐程度排序：

方案1：由父组件传入ID（最稳妥） #

放弃在Input组件内部生成ID，改为让父组件生成并传递进来，从根源上保证服务端和客户端的ID一致：

修改Input组件代码 #

"use client";
import React, { forwardRef, useId } from "react";
import classNames from "classnames";

// 保留原类型定义不变

const Input = forwardRef<HTMLDivElement, InputProps>(
  (
    {
      id: propsId,
      className,
      label,
      message,
      dirty,
      status = "default",
      renderInput,
    },
    ref
  ) => {
    // 优先使用父组件传入的ID，无传入时用useId兜底
    const inputId = propsId || useId();

    // 保留原渲染逻辑不变
  }
);

export default Input;

父组件使用示例 #

"use client";
import { useId } from "react";
import Input from "./Input";

function ParentComponent() {
  const inputId = useId();
  return (
    <Input
      id={inputId}
      label="用户名"
      renderInput={(props) => <input {...props} placeholder="请输入用户名" />}
    />
  );
}

方案2：替换渲染props为直接传递元素 #

把renderInput函数改为直接接收React元素，避免函数执行上下文不一致的问题：

修改InputProps类型 #

export type InputProps = {
  id?: string;
  className?: string;
  label?: React.ReactNode | null;
  message?: React.ReactNode | null;
  dirty?: boolean | null;
  status?: "success" | "warning" | "error" | "default" | null;
  inputElement: React.ReactNode; // 替换renderInput为直接传递元素
};

修改Input组件渲染逻辑 #

const Input = forwardRef<HTMLDivElement, InputProps>(
  (
    {
      id: propsId,
      className,
      label,
      message,
      dirty,
      status = "default",
      inputElement,
    },
    ref
  ) => {
    const inputId = propsId || useId();

    // 给传入的元素添加统一的ID和样式类
    const styledInput = React.cloneElement(inputElement as React.ReactElement, {
      id: inputId,
      className: classNames(
        "input input-bordered bg-base-300 placeholder:italic placeholder:opacity-50",
        (inputElement as React.ReactElement).props.className,
        {
          "input-ghost": status === "default",
          "input-error": status === "error",
          "input-success": status === "success",
          "input-warning": status === "warning",
        }
      ),
    });

    return (
      <div ref={ref} id={id} className={classNames("form-control", className)}>
        {label ? (
          <label className="label" htmlFor={inputId}>
            <span className="label-text text-inherit">{label}</span>
            {dirty ? <PencilIcon size={16} /> : null}
          </label>
        ) : null}
        {styledInput}
        {message ? (
          <label className="label" htmlFor={inputId}>
            <span
              className={classNames("label-text-alt", {
                "text-error": status === "error",
                "text-success": status === "success",
                "text-warning": status === "warning",
              })}
            >
              {message}
            </span>
          </label>
        ) : null}
      </div>
    );
  }
);

父组件使用示例 #

<Input
  label="用户名"
  inputElement={<input placeholder="请输入用户名" />}
/>

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