使用Preact Router遇类型错误：'path'属性不存在于'IntrinsicAttributes'

问题根源 #

1. 类型错误 Property 'path' does not exist on type 'IntrinsicAttributes'
   你的Items组件直接将参数定义为items:Array<Item>，但Preact组件的props本质是一个对象。当Preact Router渲染组件时，会自动传递path、url等路由相关属性，由于组件未定义这些属性的类型，TypeScript抛出类型不匹配错误。

2. /shop路径页面空白
   Items组件依赖items数组渲染内容，但路由配置中没有向组件传递这个props，导致items为undefined，执行items.map时触发隐性错误，组件渲染失败，最终页面无内容。

修复步骤 #

1. 修正Items组件的Props定义与逻辑 #

将组件的props改为对象形式，定义完整的Props类型，同时处理空数据情况并添加必要的key：

import { Item } from '../../Types/types'
import './item.css'
import Navbar from '../Navbar'

// 定义组件Props类型，包含业务数据和可选的路由属性
type ItemsProps = {
  items: Array<Item>;
  path?: string;
  url?: string;
};

export default function Items({ items }: ItemsProps) {
    // 处理空数据/未传入数据的情况
    if (!items || items.length === 0) {
        return (
            <>
                <Navbar />
                <div className='container'>暂无商品</div>
            </>
        );
    }

    return (
        <>
            <Navbar />
            <div className='container'>
                {items.map(item => (
                    // 必须添加唯一key，避免Preact渲染警告
                    <div className='item' key={item.id}>
                        <div>
                            <h3>{item.name}</h3>
                        </div>      
                        <div className='itemimage'>
                            <img src={item.picture} alt={item.name} />
                        </div>
                        <div>
                            <strong>{item.price}</strong>
                        </div>
                    </div>
                ))}
            </div>
        </>
    )
}

2. 在路由配置中传递必要的Props #

确保向Items组件传入items数据，比如从本地数据或API获取：

import Router from 'preact-router'
import { App } from '../app'
import Items from './shop/items'
// 示例：引入或定义商品数据
import { sampleItems } from '../data/sample-items'

export const Route = () => {
    return (
        <Router>
            <App path='/' />
            {/* 传递items数组给Items组件 */}
            <Items path='/shop' items={sampleItems} />
        </Router>
    )
}

关键说明 #

• Preact组件的props始终是对象，不能直接将数组/基本类型作为第一个参数。
• 路由组件会接收Preact Router注入的属性，需要在Props类型中声明这些可选属性以避免TypeScript错误。
• 列表渲染时必须添加唯一key属性，这是Preact的强制要求，能提升渲染性能并避免警告。
• 处理空数据边界情况，防止因数据未加载或未传入导致的渲染崩溃。

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