Firebase 9.6.11中Firestore数据库updateDoc更新数据失效问题

问题描述 #

近期尝试更新Firestore数据库中的数据始终无法成功，查阅官方开发文档以及Stack Overflow平台相关问答后，依旧无法正确实现数据更新函数，不清楚代码中存在的错误，相关代码如下。

相关代码片段 #

1. HomeScreen页面编辑跳转按钮代码 #

该按钮位于信息列表map渲染逻辑内，点击后会携带待编辑用户的userId参数跳转至EditScreen编辑页面：

<IconButton
  icon={<Icon as={AntDesign} name="edit" color="success.900" />}
  borderRadius="full"
  onPress={() =>
    navigation.navigate("EditScreen", { userId: user.id }) // 传递待编辑用户的ID
  }
/>

2. EditScreen页面完整实现代码 #

export const EditScreen = ({ navigation }) => {
  const [name, setName] = useState("");
  const [cep, setCep] = useState("");
  const [logradouro, setLogradouro] = useState("");
  const [numero, setNumero] = useState("");
  const [bairro, setBairro] = useState("");
  const [uf, setUf] = useState("");

  const usersCollectionRef = collection(db, "users");

  const handleChangeName = (value) => setName(value);
  const handleChangeCep = (number) => setCep(number);
  const handleChangeLogradouro = (value) => setLogradouro(value);
  const handleChangeNumero = (number) => setNumero(number);
  const handleChangeBairro = (value) => setBairro(value);
  const handleChangeUf = (value) => setUf(value);

  const updateUser = async (id) => {
    const userDoc = doc(usersCollectionRef, id);
    const newFields = {
      name: handleChangeName,
      cep: handleChangeCep,
      logradouro: handleChangeLogradouro,
      numero: setNuhandleChangeNumeromero,
      bairro: handleChangeBairro,
      uf: handleChangeUf,
    };
    await updateDoc(userDoc, newFields);
    navigation.navigate("HomeScreen");
  };

  return (
    <SafeAreaView style={{ backgroundColor: "#D4D4D8" }}>
      <Center h="100%" bg="dark.600">
        <Box ml="-300px" mb="80px" flexDirection="row" alignItems='center'>
          <IconButton
            size="lg"
            icon={<Icon as={AntDesign} name="left" color="orange.600" />}
            borderRadius="full"
            onPress={() => navigation.navigate("HomeScreen")}
          />
        </Box>
        <Box mb="25px" w="360px">
          <FormControl.Label ml="12px">
            <Text bold>Nome</Text>
          </FormControl.Label>
          <TextInput value={name} onChangeText={handleChangeName} />
        </Box>
        <Box w="360px">
          <FormControl.Label ml="12px">
            <Text bold>CEP</Text>
          </FormControl.Label>
          <TextInput value={cep} onChangeText={handleChangeCep} />
        </Box>
        <Text fontSize="12px">
          busque automaticamente seu edereço atraves do cep
        </Text>
        <Box flexDirection="row" mt="47px">
          <Box w="208px" mr="34px">
            <FormControl.Label ml="12px">
              <Text bold>Logradouro</Text>
            </FormControl.Label>
            <TextInput
              value={logradouro}
              onChangeText={handleChangeLogradouro}
            />
          </Box>
          <Box w="109px">
            <FormControl.Label ml="12px">
              <Text bold>Número</Text>
            </FormControl.Label>
            <TextInput value={numero} onChangeText={handleChangeNumero} />
          </Box>
        </Box>
        <Box flexDirection="row" mt="16px">
          <Box w="208px" mr="34px">
            <FormControl.Label ml="12px">
              <Text bold>Bairro</Text>
            </FormControl.Label>
            <TextInput value={bairro} onChangeText={handleChangeBairro} />
          </Box>
          <Box w="109px">
            <FormControl.Label ml="12px">
              <Text bold>UF</Text>
            </FormControl.Label>
            <TextInput value={uf} onChangeText={handleChangeUf} />
          </Box>
        </Box>
        <Box mt="50px">
          <PrimaryButton onPress={updateUser}>salvar</PrimaryButton>
        </Box>
      </Center>
    </SafeAreaView>
  );
};

代码核心错误 #

• 传入Firestore的更新字段值错误：newFields对象中传入的是handleChangeName这类state更新函数，而非name/cep等存储用户实际输入的state变量，Firestore接收到的是函数引用而非有效业务数据，无法完成正常更新。
• 存在语法笔误：numero字段对应的值写为不存在的变量setNuhandleChangeNumeromero，代码运行时会直接抛出引用错误。
• 未正确获取路由参数、绑定事件：跳转时携带的userId参数未在EditScreen页面通过路由对象读取；保存按钮绑定updateUser时未传入目标文档ID，函数内接收到的id实际是按钮点击事件对象，无法定位到待更新的Firestore文档。

修复方案 #

首先修改EditScreen的入参，读取路由传递的用户ID：

// 从导航props中解构route对象，获取路由参数
export const EditScreen = ({ navigation, route }) => {
  const { userId } = route.params; // 提取跳转时携带的待编辑用户ID
  // 原有state定义逻辑保持不变

再修正updateUser函数的更新逻辑：

const updateUser = async () => {
  const userDoc = doc(usersCollectionRef, userId); // 用拿到的userId定位待更新文档
  const newFields = {
    name: name, // 传入实际存储用户输入的state值，而非state更新函数
    cep: cep,
    logradouro: logradouro,
    numero: numero, // 修正之前的变量名笔误
    bairro: bairro,
    uf: uf,
  };
  await updateDoc(userDoc, newFields);
  navigation.navigate("HomeScreen");
};

额外优化建议：进入编辑页时可以先根据userId拉取对应用户的原有数据填充到表单中，避免用户打开编辑页看到全空的输入框。

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