React应用中使用TypeScript结合WatermelonDB实现离线存储时的组件Props类型错误解决方法

首先，你碰到的这个错误是因为React.FC默认的props类型只包含children属性，而你尝试解构的courses和lessons并没有在组件的props类型里定义。我们可以分两种常见场景来解决这个问题，同时结合WatermelonDB的TypeScript最佳实践处理数据类型。

1. 若courses和lessons是父组件传递的Props #

先为Dashboard组件创建明确的Props类型，把courses和lessons的类型包含进去。如果你的Course和Lesson模型已经在WatermelonDB中定义好，直接导入它们的类型即可：

import React from 'react';
import { View } from 'react-native';
// 导入你的WatermelonDB模型类型（替换成实际文件路径）
import { Course, Lesson } from './database/models';

// 定义Dashboard组件的Props类型
interface DashboardProps {
  courses: Course[];
  lessons: Lesson[];
}

// 用自定义Props类型替换默认的React.FC泛型
const Dashboard: React.FC<DashboardProps> = ({ courses, lessons }) => {
  return (
    <View>
      {/* 现在可以安全使用courses和lessons数据 */}
    </View>
  );
};

这样TypeScript就能识别courses和lessons是组件的合法props了。

2. 若直接从WatermelonDB获取数据（更常见场景） #

如果你的courses和lessons打算直接从数据库获取，而不是父组件传递，应该使用WatermelonDB的useQuery钩子，并为查询结果添加类型：

首先确保你的模型文件用TypeScript定义完整，比如Course模型：

// database/models/Course.ts
import { Model } from '@nozbe/watermelondb';
import { field } from '@nozbe/watermelondb/decorators';

export default class Course extends Model {
  static table = 'courses';
  
  @field('name') name!: string;
  // 其他字段按需定义
}

然后在Dashboard组件中使用useQuery获取数据：

import React from 'react';
import { View } from 'react-native';
import { useQuery } from '@nozbe/watermelondb/hooks';
import database from './database/index.js';
import Course from './database/models/Course';
import Lesson from './database/models/Lesson';

const Dashboard: React.FC = () => {
  // 用useQuery获取courses，并指定类型为Course[]
  const courses = useQuery<Course>(() => database.get('courses').query());
  // 同理获取lessons
  const lessons = useQuery<Lesson>(() => database.get('lessons').query());

  return (
    <View>
      {/* 现在可以安全使用courses和lessons数据 */}
    </View>
  );
};

这种方式下，你不需要从props解构数据，直接通过钩子从数据库获取，同时TypeScript能正确推断数据类型。

额外提示 #

• 建议把数据库配置文件index.js改成index.ts，启用TypeScript类型检查，让数据库实例的类型更明确。
• 如果模型有关联关系（比如Course包含多个Lesson），可以使用WatermelonDB的relations装饰器，并在TypeScript中定义关联类型，这样查询关联数据时也能获得完整的类型提示。

内容的提问来源于stack exchange，提问作者Gustavo F.