如何消除Payload中Type 'FC<{path:string;}>'类型不兼容错误

问题背景 #

从WordPress迁移到Payload框架时，自定义字段组件出现TypeScript类型错误，代码可正常运行但需要消除错误。错误提示如下：

Type 'FC<{ path: string; }>' is not assignable to type '(CustomComponent & PayloadComponent<FieldClientComponent | FieldServerComponent>) | undefined'.

错误出现在Block字段配置的admin.components.Field处：

{
  name: 'linkURL',
  label: 'URL',
  type: 'text',
  admin: {
    components: {
      Field: CustomLinkField, // 错误位置
    },
  },
},

自定义组件代码和Block代码如下：

原自定义组件代码 #

'use client';  // Add this line

import React, { useState, useEffect } from 'react';
import { useField } from '@payloadcms/ui';

const API_KEY = 'xxxxxx'; // Replace with your actual API key

const CustomLinkField: React.FC<{ path: string }> = ({ path }) => {
  const { value, setValue } = useField<string>({ path }); // Get the linkURL value
  const { setValue: setJsonValue } = useField<string>({ path: path.replace('linkURL', 'linkOutput') }); // Get the linkOutput field

const [loading, setLoading] = useState(false);

useEffect(() => {
  const fetchMetadata = async () => {
    if (value && value.startsWith('http')) {
      setLoading(true);
    try {
      const apiUrl = `https://iframe.ly/api/iframely?url=${encodeURIComponent(value)}&api_key=${API_KEY}`;
      const response = await fetch(apiUrl);
      if (!response.ok) throw new Error('Failed to fetch data');
      const json = await response.json();
      setJsonValue(JSON.stringify(json, null, 2)); // Store JSON output
    } catch (error) {
      console.error('Error fetching link metadata:', error);
      setJsonValue('Error fetching data');
    } finally {
      setLoading(false);
    }
  }
};

fetchMetadata();
}, [value]); // Run effect whenever value (linkURL) changes

return (
  <div>
   <input 
    type="text" 
    value={value || ''} 
    onChange={(e) => setValue(e.target.value)} 
    placeholder="Enter URL" 
    style={{ width: '100%', padding: '8px' }}
  />
  {loading && <p>Loading...</p>}
 </div>
 );
};

export default CustomLinkField;

原Block代码 #

import type { Block } from 'payload';
import CustomLinkField from '../iframely';

export const blockLink: Block = {
  slug: 'block-link',
  interfaceName: 'blockLink',
  labels: {
    singular: 'Link',
    plural: 'Links',
  },
  fields: [
    {
      name: 'linkURL',
      label: 'URL',
      type: 'text',
      admin: {
        components: {
          Field: CustomLinkField, // Use custom React component
        },
      },
    },
    {
      name: 'linkOutput',
      label: 'JSON Output',
      type: 'textarea',
      admin: {
        readOnly: true, // Prevent manual edits
      },
    },
  ],
};

错误含义 #

这个错误说明你定义的React函数组件（FC<{ path: string }>）不符合Payload框架对自定义字段组件的类型要求。Payload的自定义Field组件必须实现FieldClientComponent或FieldServerComponent类型，这类组件会接收Payload传递的标准化props（不止path一个），而你当前的组件类型只声明了接收path参数，导致类型不兼容。

修复步骤 #

• 导入Payload的字段组件类型：从Payload的类型包中导入FieldClientComponent类型，用于约束你的自定义组件：

  import type { FieldClientComponent } from '@payloadcms/ui/components/forms/Field'
  // 或者从payload/types导入，根据你的Payload版本调整
  // import type { FieldClientComponent } from 'payload/types'
  

• 修正组件的类型定义：将组件的类型从React.FC<{ path: string }>替换为FieldClientComponent<string>（string对应字段的value类型，因为你的字段是text类型）：

  // 替换原来的类型声明
  const CustomLinkField: FieldClientComponent<string> = ({ path }) => {
    // 组件内部逻辑不变
  }
  

• 可选：接收完整的组件props（非必须）：如果需要使用Payload传递的其他props（比如label、error等），可以解构更多参数，或者用...rest接收剩余props：

  const CustomLinkField: FieldClientComponent<string> = ({ path, label, error }) => {
    // 使用这些props做更多逻辑
  }
  

• 确认Block配置无需修改：你的Block代码无需调整，只要组件类型符合要求，admin.components.Field的类型错误就会自动消除。

修改后的完整组件代码 #

'use client';

import React, { useState, useEffect } from 'react';
import { useField } from '@payloadcms/ui';
import type { FieldClientComponent } from '@payloadcms/ui/components/forms/Field';

const API_KEY = 'xxxxxx'; // 替换为实际API密钥

const CustomLinkField: FieldClientComponent<string> = ({ path }) => {
  const { value, setValue } = useField<string>({ path });
  const { setValue: setJsonValue } = useField<string>({ path: path.replace('linkURL', 'linkOutput') });

  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchMetadata = async () => {
      if (value && value.startsWith('http')) {
        setLoading(true);
        try {
          const apiUrl = `https://iframe.ly/api/iframely?url=${encodeURIComponent(value)}&api_key=${API_KEY}`;
          const response = await fetch(apiUrl);
          if (!response.ok) throw new Error('Failed to fetch data');
          const json = await response.json();
          setJsonValue(JSON.stringify(json, null, 2));
        } catch (error) {
          console.error('Error fetching link metadata:', error);
          setJsonValue('Error fetching data');
        } finally {
          setLoading(false);
        }
      }
    };

    fetchMetadata();
  }, [value, setJsonValue, path]);

  return (
    <div>
      <input 
        type="text" 
        value={value || ''} 
        onChange={(e) => setValue(e.target.value)} 
        placeholder="Enter URL" 
        style={{ width: '100%', padding: '8px' }}
      />
      {loading && <p>Loading...</p>}
    </div>
  );
};

export default CustomLinkField;

注：修复了useEffect依赖项缺失的问题（添加了setJsonValue和path），避免潜在的React警告。

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