使用react-phone-number-input遇类型错误：string无法赋值给E164Number

问题背景 #

使用react-phone-number-input包时触发类型错误：Type 'string' is not assignable to type 'E164Number'，尝试通过parsePhoneNumber转换字符串未解决问题，涉及index.tsx（UI层）和useLogicRegister.ts（逻辑层）两个文件。

错误原因 #

react-phone-number-input的PhoneInput组件有明确的类型约束：

• value属性要求传入**E164Number类型**（标准国际格式手机号，如+1234567890），而非普通字符串
• onChange回调返回的参数类型是E164Number | undefined，不是string

当前代码中phone状态定义为string类型，handlePhoneChange参数类型不匹配，导致TypeScript校验失败。

解决方案 #

1. 修改useLogicRegister.ts #

导入组件内置的E164Number类型，调整状态和函数的类型定义：

import { useState } from 'react';
import { NavigateFunction } from 'react-router-dom';
import { login } from '../../../store/authSlice';
import { useDispatch } from 'react-redux';
// 导入E164Number类型
import type { E164Number } from 'react-phone-number-input';

interface useLogicRegisterProps {
    email: string;
    // 调整phone类型为E164Number或空字符串
    phone: E164Number | '';
    password: string;
    firstname: string;
    lastname: string;
    // 调整handlePhoneChange的参数类型
    handlePhoneChange: (value: E164Number | undefined) => void;
}

export const useLogicRegister = (navigate: NavigateFunction ): useLogicRegisterProps => {
    const dispatch = useDispatch();
    const [email, setEmail] = useState('');
    // 指定phone状态的类型为E164Number | ''
    const [phone , setPhone]  = useState<E164Number | ''>('');
    const [password, setPassword] = useState('');
    const [firstname, setFirstname] = useState('');
    const [lastname, setLastname] = useState('');
  
    // 调整参数类型为E164Number | undefined
    const handlePhoneChange = (value: E164Number | undefined) => {
        // 空值时设为''，兼容初始状态
        setPhone(value || '');
    };
  
    return {
      email,
      phone,
      password,      
      firstname,
      lastname,
      // 必须返回handlePhoneChange供UI调用
      handlePhoneChange
    };
};

2. 修改index.tsx #

确保解构出handlePhoneChange并正确传递给PhoneInput：

import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useLogicRegister } from './useLogicRegister';
import 'react-phone-number-input/style.css';
import PhoneInput from 'react-phone-number-input';

const Register: React.FC = () => {
    const navigate = useNavigate();
    // 解构出handlePhoneChange
    const {     
        firstname,
        lastname,
        email,
        password,
        phone,
        handlePhoneChange
    } = useLogicRegister(navigate);

    return (
        <PhoneInput 
            rules={{ required: true }}
            placeholder="Enter phone number"
            value={phone} 
            defaultCountry="US" 
            className="form-control"
            onChange={handlePhoneChange}                    
        />
    );
};

export default Register;

关键说明 #

• E164Number是react-phone-number-input内置类型，代表符合E.164标准的带+号开头的手机号格式
• 状态phone用E164Number | ''是为了兼容初始空值场景
• 无需额外调用parsePhoneNumber，组件内部会自动处理手机号的格式转换和校验

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