NextJs 中字符串未分配给类型从不出错

Question

'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;

类型“OmitwithTag”不满足约束“{[x:string]: never;}”。

属性“id”与索引签名不兼容。 类型“string”不可分配给类型“never”。

类型错误：页面“app/components/Input/page.tsx”具有无效的“默认”导出： 类型“InputProps”无效。

注意：在本地主机上工作正常，在构建时出现错误。

Answer 1

文件名

app/components/Input/page.tsx

在 Next.js 中保留用于路由目的。例如，应用程序目录中的

page.{js,jsx,ts,tsx}

会自动生成一条路线。在这种情况下，它将创建一条

/components/Input

路线，这可能是无意的。

因为它是 Next.js 保留文件，所以 Next.js 希望您仅导出一些特定的导出，例如默认组件，

runtime

、

revalidate

、

dynamic

等...

默认导出必须是接受

{ params, searchParams }

属性的 React 组件。在你的情况下，它接受

InputProps

，这是无效的。

我知道你的意思是制作一个可重用的组件而不是一条路线。因此您必须将此文件重命名为非保留名称。例如，将其命名为

Input.tsx

或

Input/index.tsx

，而不是

page

、

layout

、

route

、

default

、

template

、

not-found

。

最好将额外的文件（例如组件）移到

app

目录之外，因为它只负责路由。

代替这个结构：

.
└── app
    ├── components
    │   └── Input
    │       └── page.tsx
    ├── login
    │   └── page.tsx
    └── register
        └── page.tsx

就这样吧：

.
├── app
│   ├── login
│   │   └── page.tsx
│   └── register
│       └── page.tsx
└── components
    └── Input
        └── page.tsx

避免以后发生类似的冲突