NextJs构建时出现String无法赋值给Never类型错误求助

错误原因 #

你将自定义React组件放在了app/components/Input/page.tsx文件中，而Next.js的App Router规则里，page.tsx是页面入口文件，必须导出符合PageProps的页面组件（即只能接收Next.js页面专属props，或无额外props）。但你的Input组件需要接收自定义的InputProps，不符合页面组件的类型约束，因此构建时触发类型错误。

解决方案 #

• 重命名组件文件：将page.tsx改为普通组件文件名，比如Input.tsx，保留在app/components/Input/目录下即可。
• 更新导入路径：后续使用该组件时，调整导入路径匹配新文件名，例如import Input from '@/app/components/Input/Input'（根据项目实际路径修改）。

修改后的组件代码 #

'use client'

import { FieldErrors, FieldValues, UseFormRegister } from "react-hook-form";
import { BiDollar } from "react-icons/bi";

interface InputProps {
    id: string;
    label: string;
    type?: string;
    disabled?: boolean;
    formatPrice?: boolean;
    required: boolean;
    register: UseFormRegister<FieldValues>;
    errors: FieldErrors;
}

const Input: React.FC<InputProps> = ({
    id,
    label,
    type = 'text',
    disabled,
    formatPrice,
    required,
    register,
    errors
}) => {
    return (
        <div className="w-full relative">
            {formatPrice && (
                <BiDollar
                    size={24}
                    className="text-neutral-700
                    absolute
                    top-5
                    left-2
                    "
                />
            )}
            <input
                id={id}
                disabled={disabled}
                {...register(id, { required })}
                placeholder=""
                type={type}
                className={`
                peer 
                w-full 
                p-4 
                pt-6 
                font-light
                 bg-white border-2 
                 rounded-md 
                 outline-none 
                 transition 
                 disabled:opacity-70
                 disabled:cursor-not-allowed
                 ${formatPrice ? 'pl-9' : 'pl-4'}
                 ${errors[id] ? 'border-rose-500' : 'border-neutral-300'}
                 ${errors[id] ? 'focus:border-rose-500' : 'focus:border-neutral-300'}`
                }
            />
            <label
                className={
                    `
                absolute
                text-base
                duration-150
                transform
                -translate-y-3
                top-5
                origin-[0]
                ${formatPrice ? 'left-9' : 'left-4'}
                peer-placeholder-shown:scale-100
                peer-placeholder-shown:translate-y-0
                peer-focus:scale-75
                peer-focus:-translate-y-4
                ${errors[id] ? 'text-rose-500' : 'text-zinc-400'}
                `
                }
            >{label}</label>
        </div>
    )
}

export default Input;

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